WordPress.org

Forums

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

  1. Wild at Art Atelier
    Member
    Posted 2 years 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 Ho
    Member
    Posted 2 years 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 2 years 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 Ho
    Member
    Posted 2 years 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 2 years 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 Ho
    Member
    Posted 2 years ago #

    Same process

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

    In your woocommerce styles.

  7. Wild at Art Atelier
    Member
    Posted 2 years 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 Ho
    Member
    Posted 2 years ago #

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

  9. Wild at Art Atelier
    Member
    Posted 2 years 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 Ho
    Member
    Posted 2 years 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 2 years 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 Ho
    Member
    Posted 2 years ago #

    Yes.

  13. Wild at Art Atelier
    Member
    Posted 2 years ago #

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

  14. Roy Ho
    Member
    Posted 2 years 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 2 years ago #

    could there be a bug or problem in my woocommerce?

  16. Roy Ho
    Member
    Posted 2 years ago #

    I highly doubt it...

  17. Wild at Art Atelier
    Member
    Posted 2 years ago #

    So what do you think i could do?

  18. Wild at Art Atelier
    Member
    Posted 2 years 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 Ho
    Member
    Posted 2 years 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 2 years 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 Ho
    Member
    Posted 2 years 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 2 years ago #

    In style.css:

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

  23. Roy Ho
    Member
    Posted 2 years ago #

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

  24. Wild at Art Atelier
    Member
    Posted 2 years 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 2 years 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 Ho
    Member
    Posted 2 years 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 2 years 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

  • WooCommerce - excelling eCommerce
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags