Skip to content

Instantly share code, notes, and snippets.

@WPDevHQ
Created December 31, 2016 00:18
Show Gist options
  • Save WPDevHQ/8085125e8a20683c2393daaf5578e761 to your computer and use it in GitHub Desktop.
Save WPDevHQ/8085125e8a20683c2393daaf5578e761 to your computer and use it in GitHub Desktop.
On single product page, default WooCommerce css use equal width for product image (left) and product summary (right). In a custom project, sometimes you want to make product summary width bigger, for example 73% for your product summary and 23% for your product image. You only need to put this CSS code to the bottom of style.css file in your chi…
/**
* single product page layout *
* 23% (image) + 4% (spacing) + 73% (summary) = 100% *
**/
/* modify product image width */
.woocommerce div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce-page #content div.product div.images {
width: 23%;
}
/* modify product summary width */
.woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary {
width: 73%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment