Configure new div for archive page

  • Resolved teshn

    (@teshn)


    4 years ago

    Hello,

    how and where do I configure a new div so that the title, product cats, description, price and cart button are placed in one div?

    I want to create a list style on the archive (shop) page. The image should float on the left, the afformentioned div on the right side.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Senff

    (@senff)

    Hey @teshn,

    On the archive pages, each product is not in their own DIV, but they are in their own LI.

    To get the list format, you could use some CSS. Here’s some code to get you started with that:

    .site-main ul.products.columns-3 li.product {
  width: 100%;
}

.site-main ul.products.columns-3 li.product img {
  float: left;
  width: 30%;
  margin-right: 15px;
}

.site-main ul.products.columns-3 li.product h2,
.site-main ul.products.columns-3 li.product .price{
  clear: none;
  text-align: left;
}

ul.products li.product .star-rating {
  margin-left: 0;
}

ul.products li.product .button {
  float: left;
}

    We haven’t heard back from you in a while, so I’m going to mark this as resolved. If you have any further questions, you can start a new thread.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Configure new div for archive page’ is closed to new replies.