fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Change Select options and Add to cart buttons

Andrea Cuccarini

Hello,

I tried to customize the behavior of Change Select options and Add to cart buttons in the shop page.

The actual situation is the following page: https://www.fishesinvasion.com/test/?s=shirt&post_type=product (I reduce the item because others are not complete)

I would like to obtain a result like your example https://demo.getwooplugins.com/woocommerce-variation-swatches/

As you can see there are some main differences:

– buttons color and background are not very visible

– the size measure are in different rows not in the same like in your example. https://demo.getwooplugins.com/woocommerce-variation-swatches/

Finally in the the following product detail page:  https://www.fishesinvasion.com/test/product/worldwide-delivery-tshirt/?attribute_pa_color=white&attribute_pa_size=l

the Add to cart button is not rounded and must have some behavior of the previous ones.

Thanks in advance for your help.

Andrea

Andrea Cuccarini

Hello,

as you can see I have solved some problems, but not all of them.

The remaining ones are the following:

unable to change the filter by price bar … I want it blue and also the rounded bar ends
unable to change the basic solor of  Change Select options / Add to cart buttons. It is too bright!

Thanks in advance for your cooperation.

Andrea

Golam Kibria

Hi Andrea,

Do you want this?

Please try adding the following CSS to the customizer (Appearance > Customize > Additional CSS):

.widget.woocommerce.widget_price_filter .price_slider_amount .button {
background: blue;
border-radius: 50px;
}

I am not clear about the second part of your query. BTW, most of these are controlled by WooCommerce and your active theme.

You can check this by deactivating our plugin.

Thank You

Andrea Cuccarini

Hello,

I solved by myself many issues … only 3 remaining as you can see in the files attached.

In first file problems.jpg are indicated with 1, 2, 3 the remaining issues, instead in the second file solutions.jpg you can see the desired results. I hope this will give you a clear idea about what do do.

 

The desired results are more or less the same of your example page: https://demo.getwooplugins.com/woocommerce-variation-swatches/

Can you help me in some way, please?

Thank you so much

Andrea

Golam Kibria

Hi Andrea,

Did you try using the CSS that I shared above?

Your screenshots were not attached. I would recommend using a tool like Lightshot to upload the images.

You can also upload them to Google Drive or Dropbox and share the link here.

The visual appearance of the Add to Cart button and other parts are actually controlled by WooCommerce and your active theme. Our plugin has nothing to do with that.

Still, I will do my best to help you with your goal.

I will wait for your response.

Thank You

Andrea Cuccarini

Hello,

one week is gone and I have received no suggestions at all.

Is there some problems?

Best regards

Andrea

Golam Kibria

Hi Andrea,

Sorry for the late response. We were on a vacation.

I tried to log in to your site, but the credential is not working.

Please try adding the following CSS to the customizer:

.woo-variation-swatches .variable-items-wrapper {
flex-wrap: nowrap;
justify-content: flex-start;
}

You can also give me access to your site, I will do everything that is necessary.

Thank You

Andrea Cuccarini

Hi Golam,

there were some improvement because now the colour and size buttons are in the same row as desired, but nothing is centered unfortunately, they remain left justified. I hope this can be solved either.

[****]

Best regards

Golam Kibria

Hi Andrea,

Please try adding the following CSS too.

.woo-variation-swatches ul.variations {
align-items: center;
}

Let me know if the issue is resolved.

Thank You

Andrea Cuccarini

Well Golam,

the result is very good, thanks a lot.

Please can I obtain the same result for product name and price?

Thanks so much

Andrea

Andrea Cuccarini

Well Golam,

In the meantime I have found the solution by myself.  You can close the ticket now!

 

Best regards

Andrea