WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[resolved] CSS WordPress (27 posts)

  1. Wild at Art Atelier
    Member
    Posted 1 year ago #

    How can I change my CSS on Woocommerce? I've been trying to add a margin-top on the category images and product images but it doesn't work. Could anyone help me? My website is test.wildatartatelier.com

    http://wordpress.org/extend/plugins/woocommerce/

  2. Roy
    Member
    Posted 1 year ago #

    What you do is get yourself a dev tool like firebug or chrome tools and use that to inspect the element you want and it will tell you exactly where that style is.

  3. Wild at Art Atelier
    Member
    Posted 1 year ago #

    Yes I've tried that but for example I changed the margin top to 150px and in firebug it worked but once I put it into my woocommerce css it didn't change a thing...

    here the code that i had in firebug:
    div.product span.price, div.product p.price, #content div.product span.price, #content div.product p.price {
    color: #696767;
    font-size: 1.25em;
    margin-top: 150px;
    }

  4. Roy
    Member
    Posted 1 year ago #

    Of course that would not work because look at your class name...they are referring to price not your products list...I think what you want is:

    #main { padding:20px; }

    This is in your style.css, not woocommerce.

  5. Wild at Art Atelier
    Member
    Posted 1 year ago #

    Yes but i do not want to change my whole website. If I change in main then my blog page will also change. How can I change the css of woocommerce without changing the rest of the site?

  6. Roy
    Member
    Posted 1 year ago #

    Same process

    .products ul, ul.products {padding:20px;margin:0;}

    In your woocommerce styles.

  7. Wild at Art Atelier
    Member
    Posted 1 year ago #

    It still doesn't change anything. If I insert the code in friewire it works but once I insert it into my woocommerce.css nothing happens

  8. Roy
    Member
    Posted 1 year ago #

    Where are you editing this css? What is the path?

  9. Wild at Art Atelier
    Member
    Posted 1 year ago #

    I was editing it in Woocommerce.css
    I followed you advice by putting the woocommerce.css in the style.css but now it has changed absoltutly everyting

  10. Roy
    Member
    Posted 1 year ago #

    if you did it correctly, it will work..

    The logic is simple before you consolidated it, it was simply loading two stylesheets, your theme style.css and woocommerce.css...

    Now you're just simply copying all styles form woocommerce.css and pasting it at the end of the style.css file which essentially is the same thing except now you're only loading one stylesheet...So if done correctly, nothing should change.

  11. Wild at Art Atelier
    Member
    Posted 1 year ago #

    So i copy past the woocommerce.css to my style.css and then i go into woocommerce settings and unselect the box saying "enable woocommerce css styles". i'm sorry if i am asking silly questions

  12. Roy
    Member
    Posted 1 year ago #

    Yes.

  13. Wild at Art Atelier
    Member
    Posted 1 year ago #

    It doesn't work, thats exactly what i did and it changed everything

  14. Roy
    Member
    Posted 1 year ago #

    Ok then sorry I don't know how else to help you. I am a theme developer so I do this day in and day out...

  15. Wild at Art Atelier
    Member
    Posted 1 year ago #

    could there be a bug or problem in my woocommerce?

  16. Roy
    Member
    Posted 1 year ago #

    I highly doubt it...

  17. Wild at Art Atelier
    Member
    Posted 1 year ago #

    So what do you think i could do?

  18. Wild at Art Atelier
    Member
    Posted 1 year ago #

    do i have to insert it somewhere in specific or if i just add the things that i want to change would that work?

  19. Roy
    Member
    Posted 1 year ago #

    You have two separate issues here...I would suggest you figure out the issue we discussed first...don't worry about styling it the way you want for now as that is not the major issue...

    First figure out why it is not working for you and it breaks everything...that is the main issue.

  20. Wild at Art Atelier
    Member
    Posted 1 year ago #

    yes okey. my woocommerce generally can not be edited. i've now tried editing other things like the product price colour but nothing changes. do i have to link the two css's together?

  21. Roy
    Member
    Posted 1 year ago #

    When you said you pasted the code...What is the exact file you pasted it in? What is the path to that file?

  22. Wild at Art Atelier
    Member
    Posted 1 year ago #

    In style.css:

    /home3/wildatar/public_html/test/wp-content/themes/twentyeleven/style.css

  23. Roy
    Member
    Posted 1 year ago #

    Can you try all this again but with a different theme? Test it on twentytwelve theme.

  24. Wild at Art Atelier
    Member
    Posted 1 year ago #

    I tried it with the twentyten theme, obviously my whole website was completly different but it worked.
    I copy pasted the woocommerce.css into style.css and edited somethings that then actually did change something. Could it be that since I have copied all woocommerce files into my theme that wordpress is getting confused?

  25. Wild at Art Atelier
    Member
    Posted 1 year ago #

    I have now tried removing all woocommerce files from my theme meaning that when I open editor in wordpress they do not appear. Of course the plugin is still installed but all php files and css files are only in the plugin folder. This also didn't work...

  26. Roy
    Member
    Posted 1 year ago #

    That would mean your theme was already altered and not the default Twentyeleven...Would really be hard to help you at this point as I would have no clue what changes your theme has had...

    I suggest you retrace your steps on how you got it to this point and undo anything related to WooCommerce...Good luck!

  27. Wild at Art Atelier
    Member
    Posted 1 year ago #

    Managed to find the problem, had some codes in my functions which waas confusing wordpress! Thanks a lot for the help!!!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags