Step - 01:
To create a simple product page with ShopReady – WooCommerce Builder, head over to the ShopReady dashboard and click on the Templates tab. From here, enable the Product Template category and search for the Single Product preset, and click Save Change.
Step - 02:
To customize a single product page from scratch, click on the plus icon, and you’ll be redirected to the Elementor Editor screen. It should look something like this if you’ve imported an included demo.
Step - 03:
Now to add content to the product page, start by clicking on the Elementor’s Add New Section icon. Then select a structure.
Step - 04:
Now, from the left-hand side, search for the Product Title widget to add our product title. And drop it into the section that you’ve just created.
From the Content menu under Product Title, you’ll be able to select a title from the existing product menu from the Demo Product drop-down and toggle on the Content Refresh to make it appear on the product page.
Note: For this data to appear correctly, you’ll need to add or update your WooCommerce product information accordingly.
Step - 05:
To further customize the title, click on the Style tab, and under Typography, you will be able to change the font, font size, spacing, etc. For example, let’s use the Lato font for our product title at font size 39.
You also have the option to add more customization options from the Advanced tab.
Step - 06:
Now, to add a product image, search for the Thumbnail With Zoom widget and drop it into the section next to the product title.
To add a product image, click on the Editor Refresh menu under the Content tab and search for the product image that you would like to place.
Note: For this data to appear correctly, you’ll need to add or update your WooCommerce product information accordingly.
Step - 07:
To add a price tag, search for the ShopReady Price widget, and drop it under the product title
Click on the Editor Refresh menu under the Content tab and search for the Demo Product that you would like to place.
Note: For this data to appear correctly, you’ll need to add or update your WooCommerce product information accordingly.
To further customize the price, click on the Style tab, and under Typography, you will be able to change the font, font size, spacing, etc. For example, let’s use the Lato font for our product price at a font size of 18px.
Step - 08:
Next, you’ll need a short description for your product page. Search for the Product Description widget.
And drop it under the price tag
Step - 09:
Click on the Editor Refresh menu under the Content tab and search for the Demo Product that you would like to place.
Note: For this data to appear correctly, you’ll need to add or update your WooCommerce product information accordingly.
To further customize the product description, click on the Style tab, and under Typography, you can change the font, font size, spacing, etc. For example, let’s use the Lato font for our product description at font size 18.
Step - 10:
Now let’s add the most important function, the add to cart button. For this, search for the Add to Cart widget from the left-hand side under ShopReady widgets and drop it under the product description.
Under the Add to Cart widget, you have the option to toggle between options such as product quantity, stock information, and variable product type from the Settings tab.
And the Add to Cart button can be customized from the Style tab.
Step - 11:
You can add product categories as well using the ShopReady Meta widget. Start by dragging the Meta widget below the Add to Cart button from the left-hand side.
Step - 12:
To add social media share icons, you can utilize the ShopReady Social Icons widget from the left-hand side and drop it anywhere you want. By default, the social share icons of Facebook, Twitter, and YouTube will appear.
To add links and change the icons, click on the Social Icons menu under the Content tab. From here, you can change the icons and add unique links to every icon.
For example, by clicking on the icon menu, you can select the Reddit icon to remove the YouTube icon. And add your link.
To further customize the social icons, you click on the Style tab, and under the Style tab, you can customize the icon’s color, border, padding, etc. You can also add additional hover effects as well.
When you’re done customizing your single product page, click on PUBLISH or UPDATE to make the change go live.