How to get another woocommerce css theme to put in my main theme?

Question

Sorry for being a newbie but i really need your help.

Heres the problem: i have my main wordpress theme with woocommerce, everything works fine. The thing is: i have a secondary theme with another woocommerce style and i need to get this woocommerce css to my main theme.

How could i do this? Because even if i copy paste the .css file, i will still need the html class's from the other theme.

I dont know what to do anymore, i really apprecite any help.

Thanks and sorry, english is not my native language.

@edit i forgot to say: i dont need all the woocommerce css, i just this the product view. Like this: https://image.ibb.co/kkPtEc/Sem_t_tulo.png

Answer 1

You can use: https://es.wordpress.org/plugins/custom-css-js/

Use appropiate selectors to target the elements that you want and reach them with more precision to take priority over other css.

For example:

.elementor-745 .elementor-element.elementor-element-lueowvi .elementor-image-box-content .elementor-image-box-title {
    color: #0351d8;
    font-size: 27px;
    font-weight: 500;
}

this is a css selector with it's properties and values (copied from a wordpress that i did some time ago)

if i want this text for being red instead of this kinda blue and change the font size, for example, i'll have to:

div.elementor-image-box-wrapper > div.elementor-image-box-content > h3.elementor-image-box-title {
    color: red;
    font-size: 30px;
}

Why i did this selector? i know that this element is inside a div with elementor-image-box-content class, which is inside a div with elementor-image-box-wrapper.

Note that i also specified the html tag in css selector.

Why should it work?

the selector i set is more specific compared to the main theme one. So it will take priority when the css is rendered.

If you deal with id-based classes you'll need javascript (i recommend you to use jQuery as it's loaded by the theme or by some plugin almost always and will let you work faster an cleaner.

when i say id-based classes i mean those like:

<div class="product-id-25">
    <!-- other code -->
</div>
<div class="product-id-26">
    <!-- other code -->
</div>

You'll need to select product-id-* and make a for each loop to add the css through jQuery (for example)