How to Edit WooCommerce Shop Page W/O Elementor ?

Wondering how to make your WooCommerce shop page stand out from the crowd? One of the best ways would be to edit the page to make it more shopper-friendly. For instance, you could add Elementor’s products widgets for enhanced customization.

But because there are many ways to edit your WooCommerce shop page, which one do you use? Well, it all depends on which method you are comfortable working with. You can use plugins, elementor, codes, or even a combination of elementor and Shopready.

Without further ado, let’s find out how you can edit your WooCommerce shop page w/o elementor for an enhanced user experience.

How to Edit WooCommerce Shop Page W/O Elementor ?

How To Edit WooCommerce Shop Page W/O Elementor?

If you want to drive more sales into your online business, you should start by editing your WooCommerce shop page. This way, you can make it more user-friendly. Below are some of the most effective ways to customize your shop page.

Method One: Manual Editing

If you have no problem performing a bit of coding, you could edit your WooCommerce shop page manually. Below is a step-by-step guide on how to do it.

Step 1: Get a child theme and name it

When you purchase your site’s theme, it should come with a child theme. But if you cannot find it, you can always ask your theme developer to provide you with one.

To name your child theme, open your WordPress control panel and click on File Manager. Next, select WP-Content >Themes>Your-theme-name. From here, you can choose to name your child theme twenty-twenty-child or something close.

Step 2: Add a folder structure in the child theme

Once you have created the child theme, the next step should be to create a folder structure within it. First, click on your child theme folder (twenty-twenty-child), which you can find under themes. Then, create a new folder under it and name it WooCommerce.

Step 3: Create a subfolder

Under your WooCommerce folder, you will need to create another folder and call it ‘archive-product-.php’. This product archive template folder will serve as the shop page template file.

Step 4: Add content to your shop page template file

The shop page template file you created in step three will be empty. So, to make it functional, you have to add content. To do so, you can use a code. But if you have no knowledge about how to go about it, simply jump to the next step.

Step 5: Design your shop page template

Here, you don’t need to design a WooCommerce shop page from zero. Instead, you can use the already pre-designed product page template. Next, look for the Parent Theme and choose either the single.php or index.php file. Then, copy and paste either file into your WooCommerce folder that you created in step 2.

After that, delete your existing ‘archive-product.php’ file. Then, name your new file (single.php or index.php) ‘archive-product.php’. Next, you will need to use shortcodes to edit the page.

Step 6: Use shortcodes

The first step is to separate your product pages into either rows or columns. For example, you can decide to place two products in a single two-column row. In this case, you can use the shortcode:

However, to display the products in two columns with a limit of six products on each column, you use this shortcode:

You simply enter the codes in your archive-product.php file. But first, you have to delete the existing code. You can also try different shortcodes until you achieve your desired shop page look.

How to Edit WooCommerce Shop Page W/O Elementor ?

Method Two: Using Elementor

Not in the mood for coding? You might as well customize the default WooCommerce product page with the help of elementor. This method is pretty easy to use. And here are simple steps to help you.

Step 1: Enable WordPress elementor

If you don’t have an elementor, get to your WordPress dashboard and click Plugins then Add New option. In the search box, look for Elementor website builder and choose to install it. Lastly, press the Activate button.

Step 2: Design a new product archive

After installing the elementor, you simply create a new product archive template. You can do this by going to your WordPress Admin Dashboard and selecting My Templates.

Under Templates, click the Add New tab on the top left of the dashboard and select Product Archive. Lastly, using the Create template option, name your template.

Step 3: Customize your template

To customize your product page template, you can choose to do it from scratch. In this case, you will find a handful of unique widgets on the editing panel that you can use.

Alternatively, you can use any pre-designed template. Elementor allows you to choose different product page layouts and styles. So, you just need to choose a style and then customize it to suit your brand.

Step 4: Make use of product widgets

To customize your WooCommerce shop page further, you will need to add widgets. On your Elementor WordPress dashboard, click on the Elements tab. You will see lots of widgets to choose from, including a menu cart, products, a custom add-to-cart, and many more.

Step 5: Preview your custom shop page

Before you hit the publish button, you need to preview your product page. At the bottom left panel, you will see an eye-shaped icon. Click on the icon and choose Preview Settings. Next, select a particular product to preview.

Step 6: Save and publish

Once you are done editing your shop page and are happy with the customizations, click the Publish button. An Add Condition field will appear asking you where you want your product template to be displayed.

Select the Shop Page option and then click on the Save & Close button. Your custom WooCommerce shop page should be live now.

How to Edit WooCommerce Shop Page W/O Elementor ?

Method Three: Using Plugins

You can use whichever plugin you want because there are many of them available. However, in this post, we will focus on using a combination of elementor and Shopready plugins. Just follow these steps to edit your shop page.

Step 1: Install Shopready

On your WordPress dashboard, click on the Plugins tab and select Add New option. Next, in the search box on the top right section of the panel, search Shopready and click the Activate button.

Step 2: Add a shop page template

Next up, you should develop a shop page template to customize the default WooCommerce product page. To do this, find your Shopready plugin, then under Dashboard, select Templates. Here, you will find a range of pre-built templates that you can choose to match your brand’s style.

Choose your template and move the toggle switch to the right to activate the template. Lastly, click on the Save Changes button.

Step 3: Customize your template

After choosing your Shopready page template, now it’s time to customize it using elementor. You can customize using product details page builder, cart page builder, archive page builder, or even account page builder. Shopready provides you with so many customization features. Once you are done editing your WooCommerce shop page, simply click on the Update button.

How to Edit WooCommerce Shop Page W/O Elementor ?

Why use Shopready To Edit WooCommerce Shop Page?

Not sure why you should use Shopready and not any other plugin to edit your shop page? Here are some of the reasons.

• Ease of use

Not only is Shopready easy to use to edit a WooCommerce shop page, but also boasts easy-to-navigate customization features. Even better, it comes with pre-designed product page template options. Therefore, you don’t need to be a tech-guru to use this plugin.

• Complete plugin kit

Another reason you should consider using a combination of elementor and Shopready is because this plugin comes as a complete kit. Simply put, it comes with everything you need to customize your WooCommerce shop page, including a shop builder.

• Great customer support

When you use Shopready to edit your WooCommerce shop page, you are assured of 24-hour support plus free training. So, if you get stuck somewhere, you can always contact customer support for assistance.

• Available in free and paid versions

If you are on a tight budget, you can take advantage of Shopready’s free version, which offers many customization options. But if you would like more site licenses, you can go for the Startup, Business, or Agency Shopready versions.

How to Edit WooCommerce Shop Page W/O Elementor ?

Conclusion

The way you present your products on your eCommerce website can have a significant influence on your sales. For this reason, it makes a lot of sense to customize your default WooCommerce shop page. However, you must decide whether you want to edit your page manually, using Elementor, or plugins.

Overall, if you have basic coding knowledge, we recommend editing your shop page manually. But if you want a quick and easy way to make the customization, you can consider using elementor. Meanwhile, if you would like a method that offers unique customization features, you should use a combination of elementor and Shopready.

How to Edit WooCommerce Checkout Page W/O Elementor?

Astra Pro vs Elementor Pro – Head To Head Compare