WooComm overtaking default styles of page

Community Forums Forums Design Tips and Tricks WooComm overtaking default styles of page

This topic is: resolved

This topic contains 8 replies, has 2 voices, and was last updated by  MM 12 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #50158

    MM
    Participant
    Post count: 128

    Hi

    I’m trying to keep woo store in the normal page look – like the ‘new test’ page on this link.

    https://www.dropbox.com/sh/pzjsyab8ng3b1ng/ivBVv6qWHI

    It’s automatically doing this for woocomm cart and checkout page, but not for shop or product page.

    I created the shop page, and pointed woo store to those pages… then the style is overridden.

    My only guess is I needing a template product or shop (but

      if

    that’s the right answer?), not sure what code to insert to create the almost full width white border page – like in new test image.

    ??

    Thks anyone.

    no url, as site not deployed

    #50226

    anitac
    Participant
    Post count: 6991

    Uggghh let me tell you. I just set up two WooCom’s and what you need to do are several things. Copy the WooCom templates into your themes directory. And, also copy over the woocommerce.css into your theme directory. This way those things are pulling from your theme directory and not the WooComm plugin. You really have to tweak a lot using this even using the Genesis Connect for WooCommerce. I’d post a link to the most recent store I set up but I need to keep it off this board, but I can email it to you if you want to see it. Just send me a note on my website.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #50269

    MM
    Participant
    Post count: 128

    Thks Anita. Received your email though few WooComm users there. All underway with making CSS changes.

    I’d thought buttons / sizes / paddings etc where only altering .woocommerce sections, but seems they’ve changed other sections.

    Perhaps you or someone knows this… what needs adding to certain sections to ensure CSS only changes in that section?

    i.e. I thought changing the below would allow change particular CSS element widths on WooComm pages

    .woocommerce input, select, textarea {
    background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    padding: 0.313rem 0.625rem;
    width: 60%;

    Alas, it changes jetpack contact forms and other things also.

    Is there a great post out there on controlling various sections and their H Sizes, margins, paddings etc??

    Thanks!

    #50277

    anitac
    Participant
    Post count: 6991

    In some of the CSS where you want to make change – you might need to add the – !important – statement at the end of before the (;). That will force your edit.

    As far as I know… you just have to follow traditional CSS rules and trial and error. There may be more experienced CSS coders that have another way, but I am learning as I go along from others and using Firebug. It’s hard to give you any specifics for your job because I cannot see it, view it with Firebug and test out the code.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #51855

    MM
    Participant
    Post count: 128

    Hi Anitac (or others) – I’ve deployed WooComm now at mikemetcalfe.co

    I’m still trying to get all woocomm pages to display with my genesis page defaults.

    ie. trying to get http://mikemetcalfe.co/e-store/ (no white border, grey background)

    to display like

    http://mikemetcalfe.co/e-store/cart/ (white border)

    All pages are selected on the same template but it’s something to do with this :

    http://docs.woothemes.com/document/third-party-custom-theme-compatibility/

    I’ve tried the Content and Hooks methods (but perhaps didn’t have the right Hooks code)

    Any ideas? Thanks!

    #52054

    anitac
    Participant
    Post count: 6991

    Did you use the Genesis Connect for WooCommerce plugin?

    **added….** Did you move the CSS and WooCommerce templates over to your child theme folder?


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    • This reply was modified 1 year ago by  anitac. Reason: added additional comments
    • This reply was modified 1 year ago by  anitac. Reason: added additional comments
    #52063

    MM
    Participant
    Post count: 128

    Thks Anita. Yes all done. They suggest in their documentation that there will be issues with the shop and single product pages. I’m unsure what the correct ‘hooks’ code would be, as it needs adapting from their suggestion.

    #52066

    anitac
    Participant
    Post count: 6991

    This is the code controlling the border on this page – http://mikemetcalfe.co/e-store/cart/. I can’t seem to locate the code for the other page and I don’t see where you copied the Woocommerce.css into your child theme. That really helps using Firebug.

    [css]#content .post, #content .page {
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    margin: 0 3px 40px;
    padding: 20px 0 0;
    }[/css]


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    • This reply was modified 1 year ago by  anitac. Reason: added additional comments
    • This reply was modified 1 year ago by  anitac. Reason: added additional comments
    #52470

    MM
    Participant
    Post count: 128

    Thanks for your help Anitac. After lots of learning, this solved it.

    .woocommerce #inner .wrap {
      background-attachment: scroll;
      background-clip: border-box;
      background-color: #FFFFFF;
      background-image: none;
      background-origin: padding-box;
      background-position: 0 0;
      background-repeat: repeat;
      background-size: auto auto;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
      margin-bottom: 40px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 0;
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      padding-top: 20px;
    }
Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘WooComm overtaking default styles of page’ is closed to new replies.