Being one of the standard WooCommerce pages, the shop page can come with additional settings. In this article, you may read about the WooCommerce shop page basics, setting features, options, shortcodes, advanced customization, and how to change the page.
Table of contents
- Adjusting WooCommerce shop page (basics)
- Showing products and adding shortcodes
- Customizing the shop page (more options)
Adjusting WooCommerce shop page (basics)
By default, WooCommerce uses the shop page to show products.
It’s quite easy to set the page layout (number of products, columns) which can also depend on the theme.
For example, Storefront gives the WooCommerce shop page the following options to design the page.
Let’s go with the process and places to set up the WooCommerce shop page.
-
Choosing the page
First, you can check the WooCommerce → Settings → Products tab. There are settings of the WooCommerce shop page including some I wrote in the last part.
💡 If you can’t see any pages, you will probably need to add one in the Pages menu or there could’ve been an error when retrieving the pages from the database.
If you use the existing page with content, the product catalog will appear after the content.
-
Product Catalog settings
Next, you may go to Appearance → Customize and click WooCommerce → Product Catalog. It may also depend on the theme (and its compatibility with WooCommerce).
Basically, the settings take care of the shop page layout, number of products to show, categories, sorting, paging, product order, and columns.
The personalization will affect the final shape of the WooCommerce shop page.
-
Menus
WordPress allows us to build custom menu structures. To add the shop page link to the menu, you can go to Appearance → Menus. There is also an option to change the title in the menu or add an icon/ favicon.
-
Shop Page as homepage
It’s possible to choose the WooCommerce shop page to become the homepage. In that case, one link in the menu will probably suffice.
-
Shop Page URL
Each WordPress page or post has its unique URL using the page slug. You may change that in the product edit screen or by quickly editing the page.
💡 If you set up the shop page to be the home page as well, the URL will be rewritten to the main domain (without the slug). -
Permalinks
When you click some WooCommerce products in the shop page catalog you will be redirected to their URLs. It’s also possible to set up the structure for the product links.
-
CSS
It’s also possible to use CSS to adjust the shop page design. The necessary code can be placed in the theme’s style.css file or through Appearance → Customize and insert the Additional CSS.
I could also change the column width with CSS but I think WooCommerce deals with the product page layout (columns/ products) so it’s better to use shortcodes (later in the post).
-
Widgets
What’s more, the theme’s options can give more layout options, for example, sidebars in which one can use widgets and custom code. In the article, I use a Storefront full-width layout.
Ok, let’s see how to enhance in WooCommerce the standard shop page with shortcodes.
Showing products and adding shortcodes
The default options may be enough, but it’s possible to customize/ change the WooCommerce shop page with additional products, options, and categories. The fastest option is to use the page editor options (some may come with the theme) and WooCommerce shortcodes.
WooCommerce shortcodes for the product page example
As you can see, the WooCommerce shop page will show extra products and sections before its content.
Also, it's possible to change the standard WooCommerce shop page with additional WooCommerce and theme blocks.
Of course, it’s nice to remember that some products may show multiple times.
Customizing the shop page (more options)
Let’s move away from visible products and take care of the functional side of the WooCommerce shop page.
The products appear with the image, title, price, reviews, and the add to cart buttons.
-
Redirect, AJAX, placeholder
Let’s go back to WooCommerce → Settings → Products. As you can see, there are 3 important options to use:
- Redirect to the cart - this option may also be used for the WooCommerce shop page.
- Enable AJAX for the add to cart button - this option prevents the page from reloading after adding a product to the cart. It won’t work with the previous option.
- Placeholder image - choosing the ID for the default product image if the product has none (visible in the URL of the image in the Media menu).
-
Customizing the product titles
As I’ve shown above, it’s possible to change the product title's color. One can also need to adjust the titles on the frontend without changing every product in the backend with the the_title filter or custom code changing the $title variable.
-
Product reviews
It’s possible to show stars below the product titles - they correspond to the average rating for the product.
The settings for product reviews are inside WooCommerce → Settings → Products.
💡 You may read more about disabling WooCommerce product reviews. -
Product price
By default, WooCommerce shows the regular and sale price below the product title.
For variable products, the price range will appear.
And there is an option to decide how to show the prices.
💡 You may read more about WooCommerce products.There are also additional plugins that can modify the product prices.
Show the lowest price
For example, WP Desk made the plugin to offer the solution for the Omnibus directive.
WP DeskWP Desk Omnibus £69
Ensure your WooCommerce store complies with the EU Omnibus Directive and shows the lowest product price in the last 30 days. Use the WP Omnibus WordPress plugin to meet the new Directive and gain customer trust.
Add to cart or View Details💾 Active Installations: 4000+ | 🔄 Last update: 2024-09-24
Last Updated: 2024-11-18Works with WooCommerce 9.0 - 9.4Price discounts
It’s also possible to set up product discounts that will affect the price on the WooCommerce product page. For example, Flexible Pricing can set up the Buy one, get one free discount ✅ or discounts for the whole categories, user roles, or order total.
WP DeskFlexible Pricing WooCommerce £79
Customers love sales and pricing deals. Use this! Create promotions like Buy One Get One Free to get more sales in your store. The most dynamic pricing plugin for WooCommerce.
Add to cart or View Details💾 Active Installations: 7000+ | 🔄 Last update: 2024-10-02
Last Updated: 2024-11-15Works with WooCommerce 9.1 - 9.4 -
Add to cart button
WooCommerce comes with a generic title for the Add to cart button. So, how to change the button text? You can:
- change the translation (string) for the add to cart text,
- use the woocommerce_product_add_to_cart_text and woocommerce_product_add_to_cart_text filters to adjust the button text,
- or try the plugin.
WP DeskCustom Price for WooCommerce PRO £49
Let your customers pay what they want allowing them to name product prices in WooCommerce. The new price will be based on user input. Use Custom Price for donations or marketing campaigns!
Add to cart or View Details💾 Active Installations: 3,000+ | WordPress Rating:
Last Updated: 2024-09-07Works with WooCommerce 8.9 - 9.3 -
Choosing the quantity from the shop page
One can add only one product per click on the standard WooCommerce shop page. But it’s possible to show the quantity selector with a custom code.
As you can see, there are a lot of options for setting up the WooCommerce shop page. The possibilities are numerous including showing more data, custom meta, or graphical elements. But I think it’s more important to offer good products. Selling something bad or of no value can’t be masked with some options, CSS tricks, and appealing design.
Summary
Do you have any questions on how to change the WooCommerce shop page? If you need to customize WooCommerce, for example, product or checkout page fields, you may take a look at free WP Desk plugins.
