shiningmoon

Hi @nixiack8

Thank you so much for the reply. Unfortunately still no solution as of yet so grateful for the help – I checked out the link you had. There is a ‘Try Before you Buy’ button which I clicked, however it takes me to the ‘WooCommerce Accordions’ plugin which unfortunately did not work for me…

I did a few tests; basically my single product pages are all based on an elementor template that I put together and set for all single product pages. Turning on the WooCommerce Accordions plugin does not seem to affect the data tabs at all (meanwhile Elementor lets you customise the colours of data tabs but there is no accordion option. There is a bit of text saying that the data tabs appearance may be affected by the theme used). I did a test where I turned off the template and the product layout reverted back to the default, including the position of the tabs – which went back to the bottom of the page instead of the side like here https://imgur.com/a/9EYzCPC
However the plugin actually worked and turned those tabs into accordions – unfortunately the layout of the page itself is nothing I want however…

TLDR… Is there a way to perhaps get the plugin to override the active template that I made with elementor so I can have them both working at once?

Thank you!

Hi @jricketts4

Thank you so much for the reply.

I have to keep the site private (if needed I can try make a test site with the same features), but I did try to screenshot & made an example of what I am trying to achieve on the single product page:

View post on imgur.com

I am not even sure if I am in the right place, is this a theme thing / elementor thing instead of woocommerce? Just completely lost at where to look for a solution!
Thank you so much.

Hi @nlahssine

Thank you for the reply.

Unfortunately it does not seem to work for me: basically I can get to assigning the custom CSS class & adding effects on hover by going:

.custom-class:hover
{
(effect here)
}

Except the {background-size:120%!important;} does not seem to do anything for me…
I have tried
{transform: scale(1.2);}
Which does scale the thing, except that makes the entire column, not just background, large…

I uploaded an image of what kind of zoom I am trying to achieve:

View post on imgur.com

Is there a way I can possibly get this effect? Is there maybe a way to assign a custom CSS class to just the column background?

Thank you!

Hi @leap13, that worked perfectly – thank you so much!!