Product displaying and link colors?

Hi Eric

Thanks for the wait.

Products – Home Page:

Let’s try just starting with the home page so that we don’t try fix too many things in one go. I’ll go over the other pages with you as soon as we’ve cracked these points.

The home page product display looks like it was built manually. I have some CSS to sort everything out but first I need two fixes from your side:

1. The first product on the second row: Reningsverk, sandfilter med förfilter . Please can you build that product like the others. Mainly I need the image and description to be in separate paragraph tags like the others.

2. The last product: Trätunna av ThermoWood. There is an empty paragraph tag above the image, please remove that.

Let me know if you need help doing the above. Once that’s done you can then insert the following under Appearance > Custom CSS:

/* Home Page */

.entry-content .wp-caption:first-child { margin-top: 0; }

/* Home Page Products Row One */

#pg-2-1 .textwidget p:first-of-type { min-height: 204px; }

/* Home Page Products Row Two */

#pg-2-2 .textwidget p:first-of-type { min-height: 264px; }

Links:

For a more global link setting, please try the following under Appearance > Custom CSS:

/* Links */

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

Please adjust the colors above to suit your design. That should hopefully resolve the challenge you’re seeing there.

Buttons:

Please try the following under Appearance > Custom CSS:

/* Remove Vantage WooCommerce Button Styling */

.woocommerce #page-wrapper .button {
background: #0f75b8; /* Set this to your button background color */	
  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;
}

OR insert into style.css of your child theme. That’s up to you. Depends where you’re managing your custom CSS from. Appearance > Custom CSS is easier to access and is upgrade safe.

Thanks for the info here. The manually built page is fine, I was just differentiating that with a WooCommerce widget.

Images in the Visual Editor widget will automatically stack below each other, by default at least.

Could you perhaps let me know how you came long with my fixes that were sent above? Thanks.

Thanks. Can you confirm the Custom CSS I sent is also in place?

Hey Eric. Thanks for your efforts!

The second row of image aren’t all the same height, would you like me to send some CSS to handle that?

On mobile, container stacking is really standard. You’ll see that happening on most responsive sites across the Internet. If you’d like you can turn responsive behaviour off for the entire site in theme settings but it’s unfortunately not possible on a row by row basis. It would be really hard to read that content on a single row on mobile so it’s usually for the best.

Ahh sorry, now I’m following. Yes, for responsive to work we’ll need to have the image and the text in the same row. For more complex layouts you might try our Layout Builder widget which would let you build a layout in a row.

Super, really glad to hear you’re finding the new Layout Builder handy. Home page is looking great.

Hopefully you’ve removed the old CSS we don’t need anymore. Here is a selector you can add to set the min-height of the first price box:

/* Home - Price Table One */

#panel-w5501ba9d1842b-0-0-1 .origin-widget-price-box {
  min-height: 442px;
}

The Price Table (PB) widget unfortunately isn’t very customisable in terms of specific colors, only themes. We do have a newer SiteOrigin Price Table widget, part of our Widgets Bundle. That does allow color selection of buttons and icons but unfortunately not of the header. Perhaps try that widget out very quickly in a test page.

Please put the css I sent under Appearance > Custom CSS.

Sure let's move on. I'll dive into the next set of questions a little later today.

The location for the Custom CSS is correct, there is just a lot going on with responsive behaviour. If you could remove the two words from the first item in the right box or add two words to any single line item in the first box, that would also resolve this. We could then remove the min-height CSS.

Woo Butttons
Under Appearance > Custom CSS, please locate this selector:

.woocommerce #page-wrapper .button

See the first line, there are two ##, please remove one. When you are finished that line should read:

background: #c6d6be;

Let me know if this doesn’t make sense. Thanks.

Related Products
Please insert the below under Appearance > Custom CSS to help the related products heading.

/* Related Products */

.related.products h2 {
font-size: 14px;
font-weight: bold;
margin-bottom: 1.5em;
}

Product Image Sizes

Please could you email through a temporary set of login details so I can take a look at the image size problem. You can privately email this thread on:

[email protected]

Thanks :)

Ok, one page fixed:
http://www.spatunnan.se/badtunna-av-plast/

Moving onto shop page now.