Jump to content

Archived

This topic is now archived and is closed to further replies.

chamainew

Woo Commerce in DMS

Recommended Posts

chamainew

Hi, Does anyone know how I can customize woo commerce in DMS?

 

1) I want to change the headers, add a background color and basically upgrade from the basic BIG layout that Woo provides. I've tried CSS but it's not working. I'm sure that I'm not doing something but I cannot figure it out.

 

2) I really want to add a cart button in the header and can't figure out how to add it using widgetizer.

 

The demo site is here: http://zoziurban.com.s171851.gridserver.com/dining/

 

Any docs/videos recommendations are appreciated. Any Woo experts please contact me because I'm considering subbing the customization out to an expert so that I can finish this site.

 

 

Share this post


Link to post
Share on other sites
chamainew

Thanks! I'll review and see if I can beautify the site

Share this post


Link to post
Share on other sites
bigbrowncow

I've been on the same journey.

 

1) Can you post some of your CSS? I've been having luck with things like

.product_title {
color: #f00;
}

to change the product title and in practice things like

// bigger photo on products page
.woocommerce div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce-page #content div.product div.images
{
width: 66%;
}

2) Try http://wordpress.org/plugins/woocommerce-menu-bar-cart/

 

On docs to help...I looked at some of my competitors and copied the bits I liked best from each  :thumbsu:

 

 

Hi, Does anyone know how I can customize woo commerce in DMS?

 

1) I want to change the headers, add a background color and basically upgrade from the basic BIG layout that Woo provides. I've tried CSS but it's not working. I'm sure that I'm not doing something but I cannot figure it out.

 

2) I really want to add a cart button in the header and can't figure out how to add it using widgetizer.

 

The demo site is here: http://zoziurban.com.s171851.gridserver.com/dining/

 

Any docs/videos recommendations are appreciated. Any Woo experts please contact me because I'm considering subbing the customization out to an expert so that I can finish this site.

Share this post


Link to post
Share on other sites
Rob

WooCommerce seems very flexible in DMS and can be customized with CSS. Our store is based on WooCommerce.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chamainew

Hi!

Thanks for the feedback. The example of customizations helps a lot since I'm so new. Where do you even post the CSS in DMS? Whenever I post it...I go back and it's gone. My version is not saving any customizations which is why I thought I was doing it wrong.

Share this post


Link to post
Share on other sites
sheilahoff

In case it'll help here's what I've done on this dev site: http://www.david.hoffmangraphics.com

 

In the Dashboard under WooCommerce > Settings > General I've set styles to Enable WooCommerce CSS and set my base colors there. Then I have some CSS that is likely messy and redundant but so far it's working for us....

/* Woo Commerce */

body.custom .woocommerce .woocommerce-ordering select, .woocommerce-page .woocommerce-ordering select {display:none;}

body.custom .woocommerce-info:before {background-color: #ff0000;}
body.custom .woocommerce-message:before {background-color: #ff0000;}
body.custom .woocommerce-info {
    border-top: 3px solid #707070;
}
body.custom .woocommerce-message {
    border-top: 3px solid #707070;
}
body div.product div.images img, body #content div.product div.images img {
width: auto !important;}

.woocommerce div.product div.summary, .woocommerce #content div.product div.summary, .woocommerce-page div.product div.summary, .woocommerce-page #content div.product div.summary {
  float: right;
  margin-bottom: 2em;
  width: 70% !important;
}

.woocommerce div.product div.images, .woocommerce #content div.product div.images, .woocommerce-page div.product div.images, .woocommerce-page #content div.product div.images {
    float: left;
    margin-bottom: 2em;
    width: 30% !important;
}

p.product {
    border: 0 !important;
    padding: 0 !important;
}
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce #content input.button.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page #content input.button.alt {color: #FFF !important; height:35px;}

Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
Rob

@chamainew  In the DMS toolbar, in Chrome, click Custom Code.  Add your code there. Click Publish, then, to see the results, click the reload button to the left of it.   Don't click the reload button, as that will remove your changes if not saved by Publishing.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
chamainew

Thanks! I'm back to working on this site today and will try all you guys suggestions out. Really appreciate the support!

Share this post


Link to post
Share on other sites
Rob

You're very welcome!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×