Move short description

[Escobar]

Is there a way to move the short description below image product?

[Tom]

Hi there,

Would this display the short description directly above the long description/product tabs?

Let us know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Escobar]

Not exactly…

Well, really what I would like is for the image to appear first and below the offer label, the price, add to cart, … ean, sku, category … and below, the long description.
The web is herramientasbazarot.com in case you want to take a look.

Especially in the mobile version it currently looks a bit strange, and in this way I think it would be clearer (the big image first and then some basic information (short description with a link to long one)… and add to cart button .. and finally the long description.

[Tom]

Is there an example of the look you can send us so we can get a clear picture? It is possible to move things around in WooCommerce by unhooking and hooking their existing elements, but it can get a little messy unless we know exactly where everything should go.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Escobar]

It would be something similar to how Prestashop presents its products in the mobile version.
That is, First the product image in a single full width row.
In the second row, there could be 2 columns, in one would be the short description of the product, below the product variables if it has them, the link to the long description and the buy button, and the rest of the info (EAN, SKU, category …) and finally, below, the long description.
The second column is where the search and other widgets are …
I would like it to look like this, especially in the mobile version, or at least the closest thing to this.

[Escobar]

The previous image is as it looks now.
This image would be after the changes, with the image taking up all or most of the space in the first row.

[Escobar]

This is how a product file looks on the mobile version of a website with Prestashop.
I would like something similar for both desktop and mobile versions, if it could be, of course.

[Tom]

Ah, so you mainly just want the images/gallery to be full width above everything else.

You could try something like this as a starting point:

.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images {
    float: none;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Escobar]

You are a genius! Thanks.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts