Ordering the content on category pages

Hi,

Elements that are in the same wrapper can be sorted using the CSS property “order,” but for the hover effect you’ve chosen, it is not possible to add a short description and change the position or appearance of the “Add to Cart” button (which, in the selected design, is located on the image).

.wd-hover-icons .product-element-bottom .wd-entities-title {
	order: -2;
}

.wd-hover-icons .product-element-bottom .price {
	order: -1;
}

Here is the custom CSS code that will change the position of the swatches, titles, and prices according to the order you specified. However, adding a short description and moving the “Add to Cart” button is not possible without complex product template customizations that could break other product-related options and requires addition styling, which are out of the scope of our theme support. If you want to see a short description or the button below the product, you would need to choose a different product design from the 11 available options.

Kind Regards

The hover design you selected does not include an option to display the product description. Among all available product grid designs, the product short description is present in the following designs: “Show summary on hover” and “Full width button”. They are highlighted on the following screenshot: https://monosnap.com/file/2z2lHjbXXtMKH1f3iIcDB09w9Qt7ul.

Kind Regards

As was said in the previous message – the product design you have initially chosen does not have options for outputting a short product description.

Kind Regards

All our product designs are always available for preview on our demo site in the respective menu section (screenshot https://monosnap.com/file/6TU3ttMb9rDiZzvV0CorBwvUmU1V1u). This allows you to visually review which elements are included in each design.

It is important to note that depending on the layout of a specific design, certain elements and options may or may not be available. You can check which options are available for a specific product design in the Product Styles section within Theme Settings (screenshot https://monosnap.com/file/qepMQFb1SE2NqA8k0bmEk5Ubk5MYOu).

Based on the design appearance and the option descriptions:
• Quantity buttons are available in hover styles such as “Standard button”, “Quick”, “Full width button”, and “List” (screenshot https://monosnap.com/file/XRLwpdN31UNdiBIjlzEaEqfwc4uwPN).
• The short product description is available in hover styles such as “Show summary on hover” (https://monosnap.com/file/76wIP3OpTqpsO7VJdkA3mQjFVY3MpL) and “Full width button” (screenshot https://monosnap.com/file/hjztXOYtFK85UYIzioRmxgFraMeXVm).

As mentioned in a previous response (link https://xtemos.com/forums/topic/ordering-the-content-on-category-pages/#post-618403), adding a short description or moving the “Add to Cart” button is not possible without significant customization of the product templates. Such customizations can disrupt other product-related options, require additional styling, and fall outside the scope of our theme support.

You need to select a design from the options already available in our theme. If creating a unique design based on your preferences or maintaining custom designs created through client’s custom code require altering the HTML structure of the layout – is can’t be covered under our theme support.

For example, if you find it inconvenient that the product description in the “Show summary on hover” design is only displayed on hover, we can provide custom CSS code to make it always visible. However, if you want to display the product short description in the “Standard button” design, we cannot make these modifications for you, as they require altering the design template.

We can guide you on where to make these changes yourself, but it is important to note that such modifications will not be supported by us and may break after any theme updates.

To modify the structure of the “Standard button” design, follow these steps:
1. Access the parent theme files.
2. Locate the file woocommerce/content-product-standard.php.
3. Install a child theme.
4. Copy the file to your child theme in the same folder structure: woocommerce/content-product-standard.php.
5. After copying the file, you can make your modifications within the child theme.

Using a child theme ensures your changes remain intact during theme updates, but be cautious, as further updates may still affect the behavior if significant changes are made to the parent theme’s structure.

Kind Regards