plantshop203

Thanks @tuanphan!!! Worked great. 

@tuanphan

listing page! see screenshot with red circle

hi @tuanphan

I turned on the sale price for this product. 

Thank you!

@tuanphan

theoldyew.com/shop

Hi @tuanphan, this code isn't working for my site. It changes all the price colors. Is there another CSS target? 

Hi @paul2009. I am using your code to tag products that ship free (theoldyew.com/shop) and loving it. 

My question is: is it possible to have multiple of these tags? Say, "free shipping", "50% off" and "great gift!" all at once? I haven't been able to make more than one work at once.

I was able to figure it out!

For anyone who wants to do something like this, here's the code I used:

//product hover border
.grid-item:hover {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  top: 0;
  left: 0;  
  box-sizing: border-box;
  padding: 7px!important;
  -webkit-box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 6px -3px rgba(0,0,0,0.75);
}

.grid-item {
  padding: 7px;
}

Thank you!

13 hours ago, tuanphan said:

Do you want to increase add to cart width on mobile?

Sure! 

@tuanphan ok... update here:

Using this code I have created the desired effect:

.post-type-store-item:hover {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  top: 0;
  left: 0;
  border: 1px solid #bcbec0;
  box-sizing: border-box;
  padding: 7px!important;
  -webkit-box-shadow: 4px 4px 4px -4px  rgba(0,0,0,0.75);
  -moz-box-shadow: 4px 4px 4px -4px  rgba(0,0,0,0.75);
  box-shadow: 4px 4px 4px -4px rgba(0,0,0,0.75);
}

.post-type-store-item {
  padding: 7px;
}

See the first photo. The hover effect works great on the product list pages, but I am having a code issue on the product detail pages. See the second image.

Any way to stop this from happening?

https://pear-keyboard-jh2w.squarespace.com/shop/p/succulent-rock-garden

On 12/7/2020 at 8:26 PM, bangank36 said:

.post-type-store-item:after {
 position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  top: 0;
  left: 0;
  
}
.post-type-store-item {
  padding: 7px;
}
.post-type-store-item:hover:after {
  border: 2px solid #000;
  box-sizing: border-box;
}

Hi – this code looks great but when added, it removes the link from each of the products. So the border hover effect happens, but the products are not clickable. Is there a fix for this?

site: theoldyew.com

11 hours ago, tuanphan said:

Add to Design > Custom CSS

/* center shop title */
h2.nested-category-title.nested-category-title-padding {
    text-align: center !important;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

 

THANK YOU! Worked like a charm. 

On 2/7/2021 at 8:21 AM, tuanphan said:

I see center here?

Thank you for taking a look! It is still left-justified on mobile. See attached...

I would also love to know how to do this! 

https://www.theoldyew.com/shop/rare-plants

Hi, unfortunately the category title is still staying left-justified even with the below code inserted on my site: https://www.theoldyew.com/shop/rare-plants

Would love any help you can offer! Thank you

/* align shop title */
@media screen and (max-width:767px) {
h2.nested-category-title {
    text-align: center !important;
}
}