woocommerce tweaks needed

[stepheniryna]

Genesis is great, but woocommerce doesn't seem to match up with it well. I have Genesis framework and Dynamik Website Builder child theme on an amazon store site. And it's looking a bit wacky.

I have googled for hours looking for answers, and found only a few. Here are my remaining questions all at once. (Does anybody have any insight or even just suggestions or even a fee offer to fix it?)

1a) Description at top of category page uses bold heading font instead of standard content font. - Needs to use regular content font of my theme.

1b) Same description sits right on top row of thumbnails--needs padding.

2) I had to install a plugin to make each page display 12 items (to make equal rows of 4). Want to do it without plugin.

3) Related products (bottom of item pages) need to be smaller, and show more than 2, if possible.

4) On a product page when you click on the item thumbnails, it brings up the full-size image with text caption and same text above the image. Need to get rid of the text above image.

5) Price filter slider widget has no padding from the widget header and picks a predetermined max price. Needs 20px padding or so, and need to allow user to select max price.

6) Want to customize colors of product search widget button and box.

7) Lastly, on the category page, which shows thumbnails of items and titles, the titles are bold blue text (links). Need to change text to regular black content font.

Thanks.

http://goldbuyersupplier.com/

[fotodog13]

hey Stepheniryna,

Hope this is a help not all the answers but seem to work when I look at them in firebug

assuming this is the category page:
http://goldbuyersupplier.com/?product_cat=digital-scales

color: #333333;
font-family: 'Droid Sans',sans-serif;
font-size: 16px;
}
.term-description

for description at the top of the page try this
add
.term-description
color: #333333;
font-family: 'Droid Sans',sans-serif;
font-size: 16px;
}

think that will fix the description issie

1b-
you can try adding some padding to the bottom of the above css to give you the space you
are looking for but it might be better to try this instead.

add this to your chid css
.woocommerce .woocommerce-result-count, .woocommerce-page .woocommerce-result-count {
float: left;
margin: 2em 0 1em;
}

* the margin#2 will push the product box down and the results info as well-
think it might be a better solution for you.

2 . no clue why you should need a plugin - this is probably controlled by the
functions php file
heres a link that explains how to solve that issue
http://kb.oboxsites.com/knowledgebase/how-to-change-the-number-of-related-products-in-woocommerce-themes/

* this should be your child functions.php file - not the woocommerce file
make sure you have a backup of the file before you change the functions.php.

3. I think #2 may solve this issue as well

4. no clue- I think it might be that you are adding the text as a " caption" and you
need to add it some other way.

5. price slider
try adding this to the child css
this is for the filter price slider -

background: -moz-linear-gradient(center top , #000000 0%, #4D4D4D 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 1em 1em 1em 1em;
margin-top: 10px;
}

6. the product search info is controlled by the product form- could not see how to change that

7. the bold blue text- link- looks to be a H3 tag- not sure what the inside admin looks
like you maybe able to add a div class and style it to your liking or you could try this
add the below to your child theme css.

.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
font-size: 14px;
margin: 0;
padding: 0.5em 0;
}

It will change the font size - keeping the color the same because it is a link- if you
want to change the link color you need to style that separately but seems to me you
might want to keep that blue so people know it is a link. not just text.

* Make sure that you have back up copies of your original css and functions php before you try any of the above.

I am working on a woo commerce catalog site and while it might be a good cart I think that support and directions that they provide SUCK - they seem to only be interested in selling stuff.
I have been all over the web trying to figure out how to implement it into my theme ( agency pro ) and everything I read about woo commerce says the same thing - it always needs a lot of modification, the support sucks, but the product is good for what it does.

fyi - I am using the genesis woo commerce plugin to integrate woo commerce into my genesis theme and that part worked pretty well for a non- programmer like me

hope the above helps

best
Scott V

[stepheniryna]

Scott V : I really appreciate the time it took. I added it all to my css (Dynamik has a place to easily add custom css) but none of it worked. I have read many times so far that changing woocommerce can be a pain in the neck. I dont understand much of it, but the consensus seems to be: They should use simpler css styles, and something about how the order of styles loading makes it difficult to override.

The reason I got involved with woocommerce is because I am building an amazon store to match my other website : http:beagoldbuyer.com And the plugin for the store requires woocommerce. Since they are plugins, they allow me to mirror the design of my main site.

But I think it's not worth it. I am going to shopper press. They have some really cool functions, and I can use them later for my own store (just an idea at the moment). SP is $79 at the moment, which makes it much cheaper than paying for the other plugin and hiring a coder for woocommerce weirdness.

Once again, your time and effort is appreciated.

Let me know how the store goes for you. Or send me a link to check it out 🙂

[stepheniryna]

Scott V : I really appreciate the time it took. I added it all to my css (Dynamik has a place to easily add custom css) but none of it worked. I have read many times so far that changing woocommerce can be a pain in the neck. I dont understand much of it, but the consensus seems to be: They should use simpler css styles, and something about how the order of styles loading makes it difficult to override.

The reason I got involved with woocommerce is because I am building an amazon store to match my other website : http:beagoldbuyer.com And the plugin for the store requires woocommerce. Since they are plugins, they allow me to mirror the design of my main site.

But I think it's not worth it. I am going to shopper press. They have some really cool functions, and I can use them later for my own store (just an idea at the moment). SP is $79 at the moment, which makes it much cheaper than paying for the other plugin and hiring a coder for woocommerce weirdness.

Once again, your time and effort is appreciated.

Let me know how the store goes for you. Or send me a link to check it out 🙂

[fotodog13]

About the css- I had issues overwriting my woocommerce css as well. I found that I had to put the overwrite css at the top of my child css in order for it to work.

If I put the overwrite css at the bottom of the normal css sheet ( before the media queries, or color theme css ) then the overwrite css did not work at all. No idea why this would be the case, but it is.

I looked at the code I sent you again using firebug as my guide and those changes did work.

The site I am working on for a client is using woo commerce as a catalog only site, they don't want to sell on line, which means I have to strip a lot of the woo commerce features out.
Right now I have the site cloaked but here's a temporary link to show you what the site ( still rough) looks like now
http://www.jnamnoun.com/product-category/antique-area-rugs

No matter how you look at it- the learning curve is super high on woocommerce and very frustrating.

[Author]

Posts