Repositioning Elements

[bestfitbybrazil]

i’m trying to replace my thumbnails in mobile view with color swatches or make the color swatches appear at the bottom of product image container, which ever is easiest.  This this the class name for the color swatch elements and label

.variations.iconic-wlv-variations, .label.iconic-wlv-variations__label

The product image container class name is

.jas-col-md-6 .jas-col-sm-6 .jas-col-xs-12 .pr

The thumbnail container class name is

div.slick-track

 

As you can see the title separated from the swatches and can’t seem to get them back together unless i put them back to bottom.   and after getting rid of the thumbnails it left the white space i wanted to use for the color swatches, but there is too much white space left.  having trouble closing it without shifting everything.  Biggest challenge i have is putting an element together with another so they stay aligned. is that done by adding to container or something else.  how to add element to another element’s container?

 

 

[Harry]

Hi,

By default the plugin Variation Swatch integrated support upload thumbnail for swatch http://prntscr.com/ohkrk1 you don’t need use a plugin for it.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

you probably don’t remember but that integrated variation plugin was giving me some issues so i had to get another one.  Anyhow let me change the question.  This is how mobile view looks when there are colors options:

By the way, the mobile view does not show product thumbnails.  i removed that so i can use space for color swatches.

Everything looks ok and in alignment

This is what it the mobile view looks like when there are NO color options:

The size chart button moves up and white space containers are left showing space.  How to close this space and keep the button relative to the other elements around it?

This is how the mobile view looks if i some products have an extra element link to shoes.  The size button doesn’t move up with the color swatches so ends up behind them in this case.  see the black button behind the first color swatch? That should always stay above the color swatch row.

[Harry]

Hi,

Please add below code

.single-product-thumbnail .p-nav {
	display: none;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bestfitbybrazil]

I know you helped me with this before.  I need to increase the size of the size swatch circles which made everything move as you can imagine.  Can you help me fix this issue and explain to me what is happening so i know how to clear it up myself in the future?  thx.

This is what shows when i have product with 2 rows of color options on mobile:

everything looks ok no white space gaps or wrapping

This is what happens when there is 1 row of colors:

Notice 1 small white gap but the size options don’t move which is good.  just need to remove white gap

Now look what happens with there are no color options.  Huge white gap and size options and size guide button fly up to the photo.  eeek looks horrible.  Everything seems to shift up when there is no color options. Help… thx.

[Harry]

Hi,

1. Please edit your product in Attributes tab move “Color” up above size http://prntscr.com/oipm0j

2. Please remove your custom code and change in again, your css not optimize http://prntscr.com/oipngg

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts