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

Do you want only a part of a theme for being included on your other theme? — JoelBonetR, Mar 14 '18 at 11:42
Yes, only a part. I just need the woocommerce product that appears in the shop or in the main page. I dont need all the theme, just the product. I forget to say this. — ncesar, Mar 14 '18 at 11:48
This is what i need to edit: https://image.ibb.co/kkPtEc/Sem_t_tulo.png just this, nothing else. — ncesar, Mar 14 '18 at 11:50

JoelBonetR · Accepted Answer · 2018-03-14T12:02:16.303

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)

Hey, thanks for helping me. I have one question: But what if i need to change some HTML or add other different class? — ncesar, Mar 14 '18 at 12:01
You simply can't easily, you'll need to edit the tpl and you will not be able to update the theme without loosing your mod — JoelBonetR, Mar 14 '18 at 12:05
Ok, i will try with css/js and if not work, i will edit the theme templete, i may be able to survive without updates. Well, many thanks for helping me, a hug! — ncesar, Mar 14 '18 at 12:08
if adding css isnt working your selectors are not correct, it always can be reached with css and javascript/jQuery — JoelBonetR, Mar 14 '18 at 15:27

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

1 Answers1