Woocommerce Update from v.2 to 3 – Tips for Child Themes

Woocommerce version 3 introduced many changes. You can easily see changes on single product page image galleries. But there are many more changes under the hood.

woocommerce_product_thumbnails Hook Not Working

Yes, it’s getting replaced with image gallery’s JavaScript. For all people struggling with woocommerce_product_thumbnails hook not working in latest Woocommerce 3:

You can add what you need below thumbnails with woocommerce_after_single_product_summary hook.
i.e.

add_action( 'woocommerce_after_single_product_summary', 'iggy_added-block', 1);

Set priority 1 or something to have it before tabs.

Then with CSS you can float it to the left, and it will show just below thumbnails. Take CSS code for images column, add your block class name or id and add it to your theme.

@media (min-width: 768px) {

.single-product .class-of-added-block {

width: 41.1764705882%;

float: left;

margin-right: 5.8823529412%;

margin-bottom: 3.706325903em;

margin-top: -2em;

}

}

You may also want to add some margin at the bottom for mobiles.

Don’t Show Some Dimensions on Single Product Page and in Category

Some product dimensions could now be hidden from display on single product page or category pages. Useful to show only width and length of a product. woocommerce_after_shop_loop_item will show it before “Add to Cart” button instead of below product title.

// show dimensions on category page

add_action( 'woocommerce_after_shop_loop_item_title', 'iggy_show_product_dimensions_loop', 9 );

function iggy_show_product_dimensions_loop() {

global $product;

$width = $product->get_width();

$length = $product->get_length();

if ( !empty( $width ) && !empty( $length ) ) {

echo '<div class="dimensions">' . $width;

echo ' &times; ' . $length . ' ' . get_option( 'woocommerce_dimension_unit' );

echo '</div>';

}

}

For single product page use the code below. I’m changing default product_dimensions class to avoid loading unformatted dimensions with JavaScript for variable products.

// add product dimensions on product page

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

function iggy_custom_sizes() {

global $product;

$width = $product->get_width();

$length = $product->get_length();

if ( !empty( $width ) && !empty( $length ) ) {

// remove changes from variations with custom class addition

echo '<span class="product_dimensions_custom">' . $width;

echo ' &times; ' . $length . ' ' . get_option( 'woocommerce_dimension_unit' );

echo '</span>';

}

}

Remove Related Products in Woocommerce 3

// remove related products

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Please share your ideas on how to improve the shared code.