Ask SkyVerge: 20 WooCommerce How To’s
Hey everyone! We’ve been collecting some WooCommerce How To questions that are really easy to solve with a line or two of code or that we’ve written about already. If you haven’t checked out the news site that we sponsor yet – Sell with WP – you should check out the How To section. There are some handy WooCommerce How To’s there as well. You can also check out our free WooCommerce plugins, which sometimes solve these questions.
First thing to note: You should have a child theme created. So first question:
- Q: How do I make a child theme for my WooCommerce theme?
A: We’ve got quick directions and a template for this in our article on customizing the Product Documents accordions.
When you create your child theme, we recommend creating a functions.php
within that child theme as well. All you need to do is create a new file in your child theme directory calledfunctions.php
, and it should contain just this: <?php
. Put nothing above that – no whitespace, nothing. You’ll be able to then paste in any of these snippets into your child theme functions.php
so that they’re not erased when you update your theme. Here’s an example to paste in with a comment:
1
2
3
4
5
6
|
<?php /** * MyTheme Child theme functions and definitions * Adds any helper functions or snippets to change functionality. * */ |
If you want to be ambitious, you can create your own custom WooCommerce plugin for these instead of you’d prefer not to use a child theme functions.php
. If we don’t specify where the code goes, it goes in this new child functions.php
.
So without further ado, here’s our own list of the WooCommerce How To’s we get asked frequently.
SkyVerge WooCommerce How To’s
- Q: How do I hide WooCommerce SKUs on the product page?
A: This takes a tiny snippet in your custom CSS option or a child theme stylesheet:123.sku_wrapper {
display
:
none
;
}
- Q: How to I get rid of the “(Free)” label on shipping methods with costs of $0?
A: If you’ve set a shipping method aside from the built-in free shipping as free or $0, this label is added. You can remove it with this snippet in the bottom of your theme’sfunctions.php
:123456//Remove (Free) label on cart page for "Shipping and Handling" if cost is $0
function
sv_change_cart_shipping_free_label(
$label
) {
$label
=
str_replace
(
"(Free)"
,
" "
,
$label
);
return
$label
;
}
add_filter(
'woocommerce_cart_shipping_method_full_label'
,
'sv_change_cart_shipping_free_label'
);
You can change the (Free) text using this snippet as well. Replace the second set of empty quotes with whatever you’d like to use instead.
- Q: How do I change the size of my related product images?
A: Remi Corson has a handy tutorial for this. - Q: How can I change the wording of my coupon code fields?
A: Max wrote a tutorial at Sell with WP on Hiding or Renaming WooCommerce Coupon Code Fields. - Q: How do I get items to sort alphabetically in an order? For example, I want the items in my WooCommerce order to display alphabetically at checkout.
A: Justin wrote a tutorial for this on our blog. - Q: How can I disable the WooCommerce SKU field? I don’t have SKUs for my products.
A: Use this snippet in the bottom of your theme’sfunctions.php
:1add_filter(
'wc_product_sku_enabled'
,
'__return_false'
);
- Q: Can I add my own WooCommerce emails?
A: Yep, Max wrote a tutorial on how to add custom WooCommerce emails. Check out the comments for some really helpful hints. - Q: How do I change the number of WooCommerce products per page?
A: Check out our free WooCommerce Customizer, which has a setting for this. - Q: How do I change the currency symbol from “$” to “USD”?
A: You’ll need to add this snippet of code to the bottom of your theme’sfunctions.php
:12345678//Change the US currency symbol
add_filter(
'woocommerce_currency_symbol'
,
'change_existing_currency_symbol'
, 10, 2);
function
change_existing_currency_symbol(
$currency_symbol
,
$currency
) {
switch
(
$currency
) {
case
'USD'
:
$currency_symbol
=
'USD'
;
break
;
}
return
$currency_symbol
;
}
If you want to change something other than USD, use the appropriate currency code for
case 'XXX'
, then what you want it to change to after$currency_symbol
. - Q: How can I add my own measurement unit to WooCommerce?
A: Justin wrote a tutorial on adding dimension units, which can be adapted to other units. Be sure to check the comments for updates. - Q: How do I automatically change the order status for the cheque or BACS gateway?
A: Some people like to use these manual gateways for other payment methods, such as “Invoice me” or something similar instead. If you want these orders to just be marked as complete, you can use this snippet in the bottom of yourfunctions.php
(copy what’s after the<?php
):<?php // Automatically update the order status to “completed” for cheque orders function skyverge_auto_complete_on_hold_order( $order_id ) { $order = new WC_Order( $order_id ); if ( ‘on-hold‘ === $order->status ) $order->update_status( ‘completed‘ ); } add_action( ‘woocommerce_thankyou‘, ‘skyverge_auto_complete_on_hold_order‘ ); You can use a different order status, such as “processing” or “pending”, if you prefer to suit your workflow (or a custom order status, as described below).
- Q: How do I create my own WooCommerce order status?
A: Justin wrote a tutorial on creating custom order statuses at Sell with WP. - Q: How do I change the “Add to Cart” text on my WooCommerce buttons?
A: Use this tutorial from WooThemes. You probably want the first snippet, which will change this on your single product page, as well as the last snippet, which will let you change the text in the shop pages. - Q: How can I hide the flat rate shipping if free shipping is available?
A: Use this snippet in yourfunctions.php
to remove the flat rate shipping if free shipping is available:// Hide standard shipping option when free shipping is available add_filter( ‘woocommerce_available_shipping_methods’, ‘hide_standard_shipping_when_free_is_available’ , 10, 1 ); /** * Hide Standard Shipping option when free shipping is available * * @param array $available_methods */ function hide_standard_shipping_when_free_is_available( $available_methods ) { if( isset( $available_methods[‘free_shipping’] ) AND isset( $available_methods[‘flat_rate’] ) ) { // remove standard shipping option unset( $available_methods[‘flat_rate’] ); } return $available_methods; } You could adapt this to work with other shipping methods if needed.
- Q: How do I hide the WooCommerce shipping calculator on the cart page?
A: There’s actually a setting for this: disable it under WooCommerce > Shipping
- Q: How do I require a minimum order value for WooCommerce?
A: There’s a really handy plugin called Min/Max Quantities that does this. You can set min/max quantities or cart values, and you can even require products to be purchased in groups (great for stuff that’s sold in packages of >1). - Q: How do I change the number of related products that are displayed?
A: WooThemes has another handy document with a snippet to do this. - Q: Can I let customers select quantities from the WooCommerce shop page?
A: Yep there’s a snippet from WooThemes for this, but it only works on for simple products on the shop page. In your child theme, you’ll need to do a few things. First, create a folder named “woocommerce”, and inside of that folder, create another folder titled “loop”. Inside of the loop folder, create a file calledadd-to-cart.php
that pastes in the code used in that snippet.You also may want to adjust the way it’s displayed in your theme, as there’s no spacing between the quantity selector and the “Add to Cart” button:To get the “after” look, you’ll add this bit of CSS or similar to your custom CSS option or your child theme’s CSS stylesheet:
123456789.woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt {
display
:
block
;
margin-left
:
auto
;
margin-right
:
auto
;
}
.woocommerce .quantity, .woocommerce #content .quantity, .woocommerce-page .quantity, .woocommerce-page #content .quantity {
margin-bottom
:
5px
;
}
- Q: How do I hide the images on the product page?
A: Justin wrote another tutorial for this one: Hiding WooCommerce Product Images.