WooCommerce is the plugin that gives a basic setup for an e-commerce site, if you want to own an e-commerce site to sell your products with attractive pages to boost your sale, you may want to edit the default template that WooCommerce comes with.
Your product pages may look different in the online store than, you intend them to be. You might want to make simple changes to the way they look by editing certain WooCommerce templates. It makes sense to use a plugin or extension for complex functionality, but you can manually edit the template files, too. This also means that you’re not risking the security or speed of your site by installing extra plugins.
Customize Your Product Pages with Custom CSS
Most WordPress themes have built-in CSS. If you have some knowledge of coding, you can make design changes from the WordPress dashboard. The easiest way is with the WordPress theme customizer. But keep in mind that any changes you make will be lost if you change your theme.
Go to Appearance > Customize in your WordPress dashboard. Scroll down, click “additional CSS” in the menu. In the preview pane, navigate to one of your product pages. Type your custom CSS in the editing field highlighted in red.
Following HTML elements are targeted to the WooCommerce product page elements:
Product titles: .woocommerce div.product .product_title
Variation labels: .woocommerce div.product form.cart .variations label
Add to cart button: .woocommerce div.product .button
It is possible to customize the look of general html elements by using “.woocommerce div.product” as a prefix. For example, applying style rules to “.woocommerce div.product h2” will change the appearance of all h2 headers on the product pages only.
custom color and weight of the product title:
Visually Amazon-style “Add to cart” buttons
Note: When done with CSS changes hit on publish button before moving to the next page.
Hooks to Add or Remove Content on the Product Page
It’s easy to adjust the appearance of your product pages using CSS, changing the actual elements shown on product pages is a little more difficult. If you don’t have a background in coding, creating or tweaking WordPress functions or coding WordPress themes, you’re probably better off using a plugin to make your desired changes.
Otherwise, if you’re up for the challenge, the following is a very simplified overview of how to make those customizations manually. WooCommerce uses two template files to build product pages:
single-product.php: structure of the page template.
content-single-product.php: content for each product.
For adding and removing elements using hooks, you will need to create a WordPress child theme and add some code to the functions.php file. The functions for adding and removing elements on the product page are:
remove_action()
add_action()
These functions take an integer parameter representing the priority of each element. You can reorder elements by replacing them with higher-priority numbers.
The following code removes the product description and adds it back in with a higher priority, so it displays below the title (which has a priority of 5).
With the introduction of the Gutenberg editor, you can currently edit the WooCommerce: Cart, Checkout, Account, and Shop pages. However, there is no way to create a new product page with blocks without using an additional plugin.
Hopefully, this guide has been helpful in customizing the WooCommerce product page.
