WooComm overtaking default styles of page

[MM]

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

[Anita]

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.

---

Love coffee, chocolate and my Bella!

[MM]

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!

[Anita]

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.

---

Love coffee, chocolate and my Bella!

[MM]

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!

[Anita]

Did you use the Genesis Connect for WooCommerce plugin?

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

---

Love coffee, chocolate and my Bella!

[MM]

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.

[Anita]

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.

#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;
}

---

Love coffee, chocolate and my Bella!

[MM]

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;
}

[Author]

Posts