How to Create a Custom WooCommerce Product Page With Visual Composer

Creating a custom product page for WooCommerce can be daunting. There are so many elements to consider, and it's hard to know where to start. This article is going to focus on how you can use Visual Composer and WooCommerce to create a beautiful, functional product page!

We'll get to a custom product page in 3 simple steps:

1. Creating a product with WooCommerce;
2. Adding the product to a page created with Visual Composer;
3. Creating a custom "Add To Cart" button.

So you have a visual representation of what I'll be talking about, this is an example of what a custom product page can look like.

All the steps will be based on this layout, but everything is 100% customizable.

Creating a product

Creating a product with WooCommerce is as straightforward as it gets. The first step is to have WooCommerce installed and ready. Now log into your WordPress admin panel and follow these steps:

1. Locate "Products" on the left side menu;
2. Click on "Add New";
3. Fill in information about your product and save.

Make sure to mention the title, price, add a description. You can also add a category or anything else your product needs and that will be important to display on the product page.

Adding the product to a page

Now we can move on to the actual product page. This is where you get ultimate design freedom so you can go as crazy or as minimal as you want. The main thing I wanted to show in this step is a handy feature of Visual Composer - Dynamic Content. It allows syncing the WooCommerce products with the page where they're displayed. Meaning, if you add a dynamic price to your page when it's changed in the WooCommerce product (like the one I walked you through in the previous step) it will automatically change on the page too. You can save a ton of time with this technique in the long run.

I'll show you how to add dynamic content with the same price example, but it can be used for the image, the description, the title, and everything else you filled in about the product.

Let's say you've got your layout ready and styled and now there's a placeholder text for the price. I usually just use the Text Block element and write “Price” where I want it to be.

Next, open the Edit Window for the text block element and look for the Dynamic Content icon at the very bottom of the TinyMCE editor.

There you have to enable the toggle which allows choosing the source from which information is going to be taken. In our case, you have to find the product. You do that by writing its name or the product ID. You can find it in the “Products” section under the product.

Then just choose the type of content you want to be displayed from the dropdown. You'll find “Price” under the WooCommerce section at the bottom.

Now just save and the information will be all synced up and we can move on to the next step.

Creating a custom "Add To Cart" button

When it comes to a custom product page, you don't want to rely on the default styling of WooCommerce or your theme. So there's always a way to go around it with Visual Composer.

Once you've got your button, it's styled the way you want it to and added to the product page, there a couple of simple steps to take.

First, you'll have to open the edit window of the button and then open the link selector. There, choose “Custom” from the dropdown. Now enter the ‘Add to Cart’ URL with the appropriate product ID.
The URL should look something like this: /?add-to-cart=1404, but replace the numbers with your product ID.

When that's done your button will add the product to the cart. As simple as that.

Conclusion

Visual Composer and WooCommerce makes the perfect pair for creating custom product pages. You can use our drag-and-drop interface to customize the layout and design of your product pages and all it takes is installing both plugins in order for you to get started.

If there’s anything else about creating content using WooCommerce and Visual Composer that interests you, let us know!