Return to previous page

Some questions - by Mikel - on WordPress WooCommerce support

This topic has 12 replies, 3 voices, and was last updated 6 years, 10 months ago ago by Rose Tyler

Mikel

Participant

November 23, 2017 at 12:32

Hello  ,

I need to level up horizontally all of the products in the line.
https://prnt.sc/he63pp

I use plugin “WooSwatches – Woocommerce Color or Image Variation Swatches” for your recommendation but I have some problem. When I’m adding different colors in one type of product I can attach to them only 1 photo. In this way when I choose different color in one type of product, 1 photos changing and on the second photo product always stay in the main color. What can I do to have an opportunity of adding 2 or 3 photos of different colors or to second photo disappear.
https://prnt.sc/he6r31

Thanks

#178455 Copied

11 Answers

Olga Barlow

Support staff

November 23, 2017 at 14:46

Hello,

1) Products do not have the fixed height, that’s why if your products have the different number of colors then the height of products is different and add to cart button is not aligned. You can either enable masonry grid option in Theme Options > E-Commerce > Product Page Layout then products from the next line will be displayed below the products from the previous line without white space. Or you can add custom height or min-height for your products and align button using custom CSS, but don’t forget about responsive breakpoints.

2) It’s plugin territory. Contact plugin author about these features. We don’t have options to implement this.

Regards

#178482 Copied

Mikel

Participant

November 23, 2017 at 18:19

Thanks for your answer, can you provide me css code for this?

#178536 Copied

Olga Barlow

Support staff

November 23, 2017 at 18:32

Hello,

You may submit customization request here.

Regards

#178538 Copied

Mikel

Participant

November 24, 2017 at 13:31

1) I make request in the link, but nobody respond me. Can you tell me what css class I have to custom to have all product aligned.

2) Is this plugin compatible with the theme?
https://woocommerce.com/products/woocommerce-additional-variation-images/

Thanks

#178611 Copied

Rose Tyler

Support staff

November 24, 2017 at 14:02

Hello,

1. Please provide link to your site.
2. Read this topic https://www.8theme.com/topic/use-default-woocommerce-gallery/

Regards

#178616 Copied

Mikel

Participant

November 24, 2017 at 15:17

in private content link to my site. thanks

Please, contact administrator
for this information.

#178630 Copied
Rose Tyler

Support staff

November 24, 2017 at 15:35
Please try to add this code in Theme Options > Styling > Global Custom css:
```
.content-product .product-title {
    height: 45px;
}
.content-product .price {
    margin-bottom: 34%;
}
.shopswatchinput {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 13%;
}
@media screen and (max-width: 1200px) {
.shopswatchinput {
    bottom: 8%;
    width: 100%;
}
}
@media screen and (max-width: 480px) {
.shopswatchinput {
    bottom: 16%;
}
.shopswatchinput .wcvaround, .wcvaswatchinput {
    width: 18px !important;
    height: 18px !important;
}
}
```
Regards
#178635 Copied
Mikel

Participant

November 25, 2017 at 16:22

Thank you very much. I appreciate it. but now we have other problem, the white space in the products who don’t have the color variation looks very bad, exist any solution for this?
https://prnt.sc/hf3rc8

Please, contact administrator
for this information.

#178684 Copied
Rose Tyler

Support staff

November 27, 2017 at 10:43
Hello,

Sorry for the delay due to the weekends.
Please try to change previous code to:
```
.content-product .product-title {
    height: 45px;
}
.content-product .price {
    margin-bottom: 13%;
}
.shopswatchinput {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 11%;
    width: 100%;
}
@media screen and (max-width: 1200px) {
.shopswatchinput {
    bottom: 9%;
    width: 110%;
}
.content-product .price {
    margin-bottom: 17%;
}
}
@media screen and (max-width: 480px) {
.shopswatchinput {
    bottom: 18%;
}
.shopswatchinput .wcvaround, .wcvaswatchinput {
    width: 18px !important;
    height: 18px !important;
}
.content-product .price {
    margin-bottom: 40%;
}
}
```
If you have any questions about additional customization you can contact WP-Kraken team.

Regards
#178732 Copied
Mikel

Participant

November 29, 2017 at 15:53

thank you very much, its work perfect. great support

#178957 Copied

Rose Tyler

Support staff

November 29, 2017 at 15:54

You’re welcome!
Let us know if you need any further assistance.

Regards

#178958 Copied
Viewing 12 results - 1 through 12 (of 12 total)