1. Home
  2. Docs
  3. How-to
  4. Add new product
  5. How to add new products

How to add new products

Step by step guide on how to add new products.

  1. From the dashboard, go to Products > Add new.
  2. Enter product name.
  3. In the right-hand columns, scroll to Product Categories and choose the Category for this product.
  4. Scroll further down to Product Image – this will be the main product image you want displayed
  5. Below it is Product Gallery – this will be the following images after the main product image. This is optional.
  6. Scroll down to Product Data. Here you will enter the product price.
  7. Below that is Product Short Description. This is where you will type details on the products. This information will be displayed in Quick View.
  8. To add collapsible text in the Product Short Description section, paste the following:
    1. <details><summary>Heading</summary> Collapsible text goes here </details>
    2. 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>
  9. To add images in the collapsible section, you need to add the following code inside the <details> tag.
    1. 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>

Was this article helpful to you? Yes No

How can we help?

×

Cart