Formatting the product page

[SamV]

Hey Bill,

Another couple of questions. What is the best way to move the variations block (Frequency/Gift Aid/Add to cart) to just below “From: £2.00 / month”? Or do you think it looks fine where it is?

Also is it possible to either make it possible to switch off the related products block per product page, or at lease reduce the size of them as they are huuuge?

Many thanks,
Sam

[Bill Robbins]

Hello Sam,

You can get rid of the related products if you’d like to. Here’s how to do that:

1. Go to the Appearance section in your WordPress dashboard and click on Customize.
2. Look down for the advanced section and click on it. Then choose Custom CSS.
3. In the box there, add this:

   
   .related.products {
   	display: none;
   }
   

4. Save your changes.

---

It is possible to swap around the items in a single product view. The items that make up the content at the top of a WooCommerce product are made by loading several actions:

/**
 * Product Summary Box
 *
 * @see woocommerce_template_single_title()
 * @see woocommerce_template_single_price()
 * @see woocommerce_template_single_excerpt()
 * @see woocommerce_template_single_meta()
 * @see woocommerce_template_single_sharing()
 */
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

/**
 * Product Add to cart
 *
 * @see woocommerce_template_single_add_to_cart()
 * @see woocommerce_simple_add_to_cart()
 * @see woocommerce_grouped_add_to_cart()
 * @see woocommerce_variable_add_to_cart()
 * @see woocommerce_external_add_to_cart()
 */
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );

To change the order that these appear you would remove an action from it’s current location and then add it it back in with a different priority. This would be done best in a child theme’s functions.php file.

Say you want to move the variable add to cart spot and place it below the price. I think this is how you would do that:

remove_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );

add_action( 'woocommerce_single_product_summary', 'woocommerce_variable_add_to_cart', 11 );

Since the price spot has a priority of 10, by adding this in at 11 it should appear right after it.

I haven’t tested that out specifically, but I believe that’s the idea here.

Bill

[SamV]

Awesome thanks!

[Author]

Posts