Step by step guide on how to add new products.
- From the dashboard, go to Products > Add new.
- Enter product name.
- In the right-hand columns, scroll to Product Categories and choose the Category for this product.
- Scroll further down to Product Image – this will be the main product image you want displayed
- Below it is Product Gallery – this will be the following images after the main product image. This is optional.
- Scroll down to Product Data. Here you will enter the product price.
- Below that is Product Short Description. This is where you will type details on the products. This information will be displayed in Quick View.
- To add collapsible text in the Product Short Description section, paste the following:
- <details><summary>Heading</summary> Collapsible text goes here </details>
- If you want to include images in this section, the click Add media and include the image/images you want included. Make sure to add the image before the </details>
- To add images in the collapsible section, you need to add the following code inside the <details> tag.
- Inside the <details> tag, include the following code to display images in a row. This example shows a a row with four columns. Each column has an image and text.
<div class=”row”>
<div class=”column”>
<strong>Size 1</strong>
<img src=”/wp-content/uploads/2022/02/YKK-London-Showroom-Stock-Shoot-01_222536-300×200.jpg”>
</div>
<div class=”column”>
<strong>Size 2</strong>
<img src=”/wp-content/uploads/2022/02/YKK-London-Showroom-Stock-Shoot-01_222536-300×200.jpg”>
</div>
<div class=”column”>
<strong>Size 3</strong>
<img src=”/wp-content/uploads/2022/02/YKK-London-Showroom-Stock-Shoot-01_222536-300×200.jpg”>
</div>
<div class=”column”>
<strong>Size 4</strong>
<img src=”/wp-content/uploads/2022/02/YKK-London-Showroom-Stock-Shoot-01_222536-300×200.jpg”>
</div>
</div>
The example above displays the text above the image. If you want to display text under the image switch the <img> tag and the <strong> tag. So it would look like this:
<div class=”column”>
<img src=”/wp-content/uploads/2022/02/YKK-London-Showroom-Stock-Shoot-01_222536-300×200.jpg”>
<strong>Size 4</strong>
</div>