This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Re. Vantage Theme and Woocommerce

Resolved 18 replies premiumthemetheme-vantage
11 years ago · Last reply by Andrew Misplon 11 years ago

Hi everyone, I was wondering if
1) is there a way to have a mini cart that just displays the cart total in the upper right corner?

2) When I place 2 widgets in the header section it almost shows them side by side instead of one under the other? here is a sample of what I am talking about:
http://prntscr.com/61nfxy

and

3) any page that shows the cart on the right side menu bar shows up with the blue buttons but when on the “Our products” page shows up like a clear or white? you can see here what I am talking about:
http://prntscr.com/61nfnn

Any help would be greatly appreciated.

Thanks
Cass

URL: http://dev.hostingrush.com/sunstream

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

18
  1. Andrew Misplon Staff 11 years, 21 days ago

    Hi cass

    1. Unfortunately not at this time.

    2. That’s default for the header widget area, to change this, insert a Layout widget into the header widget area and then use that widget to build your vertical layout in the header widget area.

    3. Please try the following under Appearance > Custom CSS:

    /* Links */
    #main a { color: #dd3333; }
    #main a:hover { color: #2b1100; }

    Change those to your link colors. Should do the trick.

  2. cass 11 years, 21 days ago

    Thanks Andrew, for question # 3 the css code that you sent me is for the link colors but what I an referring to is the blue color button not all the links of the site. When I apply that css entry all the links on the site change.

    Thanks
    Sid

  3. Andrew Misplon Staff 11 years, 20 days ago

    Apologies, let’s get that Vantage styling out the way. Insert the following under Appearance > Custom CSS:

    /* Remove Vantage WooCommerce Button Styling */
    .woocommerce #page-wrapper .button {
      border-top: initial;
      border-left: initial;
      border-right: initial;
      border-bottom: initial;
      background: initial;
      background: initial;
      background: initial;
      background: initial;
      background: initial;
      filter: initial;
      -webkit-border-radius: initial;
      -moz-border-radius: initial;
      border-radius: initial;
      color: initial;
      -webkit-box-shadow: initial;
      -moz-box-shadow: initial;
      box-shadow: initial;
      width: initial;
      text-decoration: initial;
      /* Improves usability and consistency of cursor style between image-type 'input' and others */
      cursor: initial;
      /* Corrects inability to style clickable 'input' types in iOS */
      -webkit-appearance: button;
      line-height: initial;
      text-shadow: initial;
    }
  4. cass 11 years, 18 days ago

    Thanks Andrew, I tried that and it made changes to the way the products were displaying and that was not the change I was looking for. The problem I am having is the buttons showing blue when you are on any other page but the woocommerce page. You can see an example here: http://dev.hostingrush.com/sunstream/our-ingredients
    on that page if you were to add a product and go to that page you will see the buttons “View Cart” and “Checkout” are blue.
    I would prefer they stay “white” like the the buttons on the “products” page.

    Thanks
    Sid

  5. Andrew Misplon Staff 11 years, 17 days ago

    This is something we can look into the medium term, unfortunately for right now it’s not possible for us to resolve this from the support team side of things. Vantage WooCommerce styling isn’t reaching those cart buttons and is losing out to WooCommerce styling – apologies. What I suggested with that last bit of CSS was to remove Vantage WooCommerce button styling. That would free you up to style all your WooCommerce buttons using their design settings.

  6. cass 11 years, 11 days ago

    Hi Andrew I am afraid of loosing changes when the theme updates so I used the wordpress plugin
    “Orbisius Child Theme Creator” to create a child theme called “Vantage-child” and this is the theme that is active. The CSS code that you sent me does not seem to do anything? and any other css code that I try does not seem to do anything either. Can it be possible that this is because of the child theme or child theme creator?

    I need to make some css code changes but they do not seem to take affect?

    Thanks
    Sid

  7. Andrew Misplon Staff 11 years, 8 days ago

    Hi Sid

    Glad to hear you’re thinking about updates. But to confirm, the child theme is only helpful if you’re modifying theme files at a code level. When you do that, the modified theme file then gets copied (not cut) from the parent them and inserted into the child theme. This doesn’t apply to CSS. If you change a CSS selector then only that selector must go in the child theme’s stylesheet OR under Appearance > Custom CSS which is also upgrade safe.

    Please can you try inserting the CSS again. It can go either in your child theme’s stylesheet or easier, under Appearance > Custom CSS. Then confirm a url for your site (I’m not successfully loading the link in this thread) and I’ll confirm that the CSS is working or not.

  8. cass 11 years, 8 days ago

    I applied the code above, you can check the site:
    http://dev.hostingrush.com/sunstream
    One problem I have when I apply the code is that the “Add to Cart” button disappears on the product detail page.
    besides that I I do not see what changed.

    Thanks
    Sid

  9. Andrew Misplon Staff 11 years, 7 days ago

    Sorry about that. Please remove the Custom CSS in question and try this instead:

    /* Remove Vantage WooCommerce Button Styling */
    .woocommerce #page-wrapper .button {
      border-top: initial;
      border-left: initial;
      border-right: initial;
      border-bottom: initial;
      background: #8cc63e;
      filter: initial;
      -webkit-border-radius: initial;
      -moz-border-radius: initial;
      border-radius: initial;
      color: initial;
      -webkit-box-shadow: initial;
      -moz-box-shadow: initial;
      box-shadow: initial;
      width: initial;
      text-decoration: initial;
      /* Improves usability and consistency of cursor style between image-type 'input' and others */
      cursor: initial;
      /* Corrects inability to style clickable 'input' types in iOS */
      -webkit-appearance: none;
      line-height: initial;
      text-shadow: initial;
    }
  10. cass 11 years, 7 days ago

    Hi Andrew
    Thank you so much, that seem to work, it also fixed the problem with the cart button colors on the right side menu bar. The only problem I see now is that the “buttons” “Add to cart” or “Select options” do not show up with the hand as if was a button even thought you can click on it they do not show up as clickable buttons.

    What should I change in the css code for this to work.

    Thanks
    Sid

  11. cass 11 years, 7 days ago

    Sorry I should have stated the above comment is that they show up clickable as buttons in Google Chrome but not in FireFox.

    Thanks
    Sid

  12. Andrew Misplon Staff 11 years, 6 days ago

    Thanks for picking this up. Please try replacing our Custom CSS as follows:

    /* Remove Vantage WooCommerce Button Styling */
    .woocommerce #page-wrapper .button {
    	background: #8cc63e;	
    	border-top: initial;
    	border-left: initial;
    	border-right: initial;
    	border-bottom: initial;
    	cursor: pointer;
    	filter: initial;
    	-webkit-border-radius: initial;
    	-moz-border-radius: initial;
    	border-radius: initial;
    	color: initial;
    	-webkit-box-shadow: initial;
    	-moz-box-shadow: initial;
    	box-shadow: initial;
    	width: initial;
    	text-decoration: initial;
    	/* Improves usability and consistency of cursor style between image-type 'input' and others */
    	cursor: initial;
    	/* Corrects inability to style clickable 'input' types in iOS */
    	-webkit-appearance: none;
    	line-height: initial;
    	text-shadow: initial;
    }
  13. cass 11 years, 5 days ago

    Thanks for the updated code but when I am on Google Chrome and go to http://dev.hostingrush.com/sunstream/shop/general/natural-deodorant/
    I still see that the “Add to cart” button still does not show up as a clickable button.

    In Firefox none of the buttons show up as clickable on any product or any page.

    Thanks
    Sid

  14. cass 11 years, 5 days ago

    Besides the above comment, I also been researching how to set the “related products” section and it seems that the theme is displaying the “related products” larger than what woocommerce had it. Is there a css code to set it back to the default size? I have attached a link for you to see what I am referring to:

    http://prntscr.com/68km2u

    Thanks
    Sid

  15. Andrew Misplon Staff 11 years, 4 days ago

    Small change to fix the cursor issue:

    /* Remove Vantage WooCommerce Button Styling */
    .woocommerce #page-wrapper .button {
    	background: #8cc63e;	
    	border-top: initial;
    	border-left: initial;
    	border-right: initial;
    	border-bottom: initial;
    	cursor: pointer !important;
    	filter: initial;
    	-webkit-border-radius: initial;
    	-moz-border-radius: initial;
    	border-radius: initial;
    	color: initial;
    	-webkit-box-shadow: initial;
    	-moz-box-shadow: initial;
    	box-shadow: initial;
    	width: initial;
    	text-decoration: initial;
    	/* Improves usability and consistency of cursor style between image-type 'input' and others */
    	cursor: initial;
    	/* Corrects inability to style clickable 'input' types in iOS */
    	-webkit-appearance: none;
    	line-height: initial;
    	text-shadow: initial;
    }
  16. Andrew Misplon Staff 11 years, 4 days ago

    Please give the following a go for me for the related products issue:

    /* WooCommerce */
    .woocommerce .related h2 {
    font-size: 18px;
    margin-bottom: 1.5em;
    }
    .woocommerce .related ul li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .related ul.products li.product {
    width: 20%;
    }
  17. cass 11 years, 4 days ago

    Thanks so much for your help that worked
    for the related products and the “Add to cart” button.

  18. Andrew Misplon Staff 11 years, 3 days ago

    Super, glad to hear that did the trick :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread