enter image description here

Ok so I’m trying to do that for 1 long day right now, without find a correct solution.

I’m working with WordPress (woocommerce) and Divi theme.

What I have :

When a user click on a product, the description is displayed but others products go below the description of the previous product (see picture)

What I would like :

A list of products (ul li) that I have to display on a line (3 products by line, it’s ok for that).

When a user click a product, the description of it is displayed below the product (in full width), without changing the position of others products.

In responsive, the description must be displayed below the associated product, and not under the last product

I don’t know how to add code in WordPress (woocommerce). I need a place where product’s description is available.

The HTML is added by the BO, it’s just a list of product :

<ul class="products">
    <li class="product">
        <span class="et_shop_image">
            <img src="#">
            <h3>Product name</h3>
        </span>
    </li>

    <div class="description">
        <h3>Product name</h3>
        <p class="text-description">This is a description</p>
    </div>

    <li class="product">
        <span class="et_shop_image">
            <img src="#">
            <h3>Product name 1</h3>
        </span>
    </li>

    <div class="description">
        <h3>Product name</h3>
        <p class="text-description">This is a description</p>
    </div>
</ul>

The div with description class is added in content-product.php, after

.

JS :

$('li.product').click(function () {
    var currentContent = $(this).siblings('.description');
    $('.description').not(currentContent).slideUp();
    currentContent.slideToggle().siblings('.description');
});

CSS (nothing very interessant) :

ul.products {
  margin-top: 5% !important;
}

li.product {
  border: solid 3px rgb(127, 199, 41);
  border-radius: 20px 0 20px 0;
  padding: 9px !important;
  text-align: center;
  min-height: 280px;
}

.active-product {
  &:after {
    content: '';
    width: 25px;
    height: 25px;
    background: $gris-clair;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    bottom: -58px;
    transform: rotate(45deg);
  }
}

This is before click (note that it missed a space between lasts products)

And after click :

Read more here: Horizontal/Vertical alignment in list


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: