Help Center

The Shop page is where customers browse all available products. Customizing this page helps create a pleasant browsing experience and highlights your products effectively.

Why we need to customize WooCommerce shop page? #

A shop page is essential to your online store as customers will interact with it the most. The look of your WooCommerce shop page leads to the success of your online business. How you arrange your products in a certain way, how detailed the product information is provided, or how easily buyers can find the things they are looking for surely affect the buyer experience.

Creating an attractive and user-friendly WooCommerce shop page that simplifies the buying process, and distinguishes yours from others can bring a big opportunity. These are the revenue, the conversion rates, and further, the reputation of your business.

While the basic WooCommerce shop page template is already functional and good-looking, there are still some inappropriate showcases for certain types of products. If you wish to show off each of your products in the best way, then you should need a custom WooCommerce shop page.

In this article, we will introduce to you the effortless way to customize your WooCommerce shop page using Elementor. You will know what it is, right in the following part.

Customize a Pre-design Shop Page Woo Shop Page with Elementor #

Already have a pre-designed Shop Page? Here’s how to edit it with Elementor:

1. Navigate to your Pages: In the WordPress dashboard, go to Pages > All Pages from the left-hand menu.
2. Find your Shop Page: Locate the Shop page you want to edit in the list.
3. Edit with Elementor: Hover over the Shop page title and click the Edit with Elementor link that appears.

Creating a Custom WooCommerce Shop Page with Elementor #

Step 1: Create a Product Archive Template #

Let’s design product shop pages that can be applied to all products on the site.

• Go to “Elementor,” open “My templates,” and click on the “Add new” button.
• Choose “Product archive” as your template.
• Enter the template name and click on the “Create template” button.
  

Step 2: Insert an Elementor Template or Build One from Scratch #

You need to choose a layout you want to customize your shop with Elementor. Alternatively, you can build one from scratch and design it by using special widgets in the editing panel.

We suggest you select one of the available layouts and then customize it to best suit  your site.

Step 3: Add Products Widgets to Beautify your Shop #

Elementor does provide widgets solely to create a WooCommerce site. You can use these widgets to customize every single corner of your online shop.

Here is a list of Elementor widgets that you can use:

• Archive title and description
• WooCommerce Breadcrumbs
• Custom add to cart
• Archive product
• Products
• WooCommerce pages
• Menu cart
• Product categories

Step 4: Tweak the “Add to cart” Button #

The “Add-to-cart” button is the most important feature of any shop page. What you need to do is make your “add-to-cart” button stand out and catch customer’s eyes.

Click on the “Custom Add to Cart” block and try adjusting to make it in line with your brand style.

Step 5: Set the Condition and Public your Shop Page #

Once you’re happy with all the customizations you’ve done to your page, hit the “Publish” button.

Elementor will ask you to set the condition that determines where your template is used throughout your site.

By default, the template will affect all the product pages on your site. You can also select a specific category of products.

Click on “Save & Close” to finalize everything. By finishing this step, you’ve done the WooCommerce shop page customization with Elementor.

Additional Tips for Customization #

• Global Settings: Use Elementor’s global settings to ensure consistency across your site. Set global fonts, colors, and button styles.
  
• Templates for Reuse: Save sections or complete designs as templates. This allows you to reuse elements across different pages, maintaining a consistent design language.
  
• Mobile Responsiveness: Use Elementor’s responsive editing tools to customize how your Single Product and Shop pages look on mobile and tablet devices. Ensure that the design remains user-friendly and visually appealing on all screen sizes.
  
• Testing and Optimization: Regularly test your customized pages for performance and user experience. Optimize images and scripts to ensure fast loading times and a smooth shopping experience.

Additional Resources #

To learn more about Woocomerce Product Archives, refer to the following resources:

Woocommerce Product Archives – Help Center