Return to previous page

Products alignment and display - by tumoneygram@gmail.com

This topic has 10 replies, 2 voices, and was last updated 5 years ago ago by tumoneygram@gmail.com

tumoneygram@gmail.com

Participant

December 4, 2020 at 12:12

Hi,

I would like to know if is to possible to do the following customizations:

1) To have grid product display on desktop and list on mobile by default (without filters)

2) To make title length equal for all the products. Products Short titles are displayed just in one row, while products longer titles occupy 2 rows, consequently, price and buttons of the different products are not aligned. There is a way to leave a two row space on short titles even if they do not needed. I know there is a way to limit on desktop the title words however I would prefer that titles are not cut (in addition, this option does not work for mobile devices).

3) Increase the size of price in shop product grid

7.2 / Core plugin 3.2 + child theme

Please, contact administrator
for this information.

#262627 Copied Theme version: 7.2

9 Answers
Olga Barlow

Participant

December 4, 2020 at 15:55
Hello,

1) Submit customization request here to get help with this because we are unable to provide support for major customizations under our Support Policy. We can help you only with minor CSS styles.

2) Add the below code to Theme Options > Custom CSS

/* ========= To align products ========== */ .main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product { display: flex; justify-content: center; } .products-loop .ajax-content, .products-loop { display: flex; flex-wrap: wrap; flex: 1; } .content-product { flex-direction: column; justify-content: space-between; display: flex; flex: 1; } .content-product .quantity-wrapper { margin-right: auto; margin-left: auto; } .content-product .product-title a { min-height: 5ex; line-height: 2.5ex; } /* ========= To align products END ========== */

3) Add the below custom code

.product-details .price { font-size: 25px; }

Regards
#262680 Copied
tumoneygram@gmail.com

Participant

December 4, 2020 at 18:10

Thank you Olga.

2) It seems to work however there is a problem. The first row shows just 2 products instead of 3 products.

3) works correctly

Please contact administrator
for this information.

#262707 Copied

Olga Barlow

Participant

December 5, 2020 at 00:47

Hello,

You are welcome. What browser do you use? Because I don’t see the mentioned issue http://prntscr.com/vw3c5h

Regards

#262735 Copied

tumoneygram@gmail.com

Participant

December 6, 2020 at 17:43

Thank you for the answer. I have tried with Chrome and no problems reported. However with Safari there is this problem. I tried with different computers.

In the first row of the shop page there are just 2 products and a blank space instead of 3 products. Then, in product page, in the section of related products just 3 products and a blank space instead of 4 and the fourth product is displayed by itself in second row.

However, in the picture you sent me, the sale badge of 32% is not ok. Must be something that is creating problem.

Please contact administrator
for this information.

#262902 Copied

tumoneygram@gmail.com

Participant

December 6, 2020 at 21:02

I have also another problem. The header category banner of the following page has been created with WPBakery. Once one of the filters of the shop has been applied, the header banner changes its format

Please contact administrator
for this information.

#262914 Copied

tumoneygram@gmail.com

Participant

December 6, 2020 at 23:05

“I have also another problem. The header category banner of the following page has been created with WPBakery. Once one of the filters of the shop has been applied, the header banner changes its format. ”

This problem has been partially solved. I disabled Ajax filters. I don’t know why they were changing the format of some elements of my website. Right now I am using xstore filters without Ajax.

#262915 Copied

tumoneygram@gmail.com

Participant

December 7, 2020 at 11:42

However the problem of product display was not solved.

#262946 Copied
Olga Barlow

Participant

December 8, 2020 at 13:24
Hello,

1) What version of Safari do you use? I checked your site again and the sale label is ok http://prntscr.com/vy7umy
Try to remove the previous code I gave you and replace by this one only

.content-product .product-title a { min-height: 5ex; line-height: 2.5ex; }

2) So, do you still need help with this or disabling the Ajax filtering is ok for you?

Regards
#263086 Copied
tumoneygram@gmail.com

Participant

December 8, 2020 at 13:39

Hi,

Thank you very Much Olga.

Product filter alignment is ok.

I have another topic opened about the Ajax filtering problem. I am going to close this topic.

Thank you again

#263091 Copied
Viewing 10 results - 1 through 10 (of 10 total)