Return to previous page

Related Products/Our Offers Tweaks - by talonhead

This topic has 26 replies, 4 voices, and was last updated 8 years, 2 months ago ago by Jack Richardson

talonhead

Participant

September 5, 2016 at 12:45

Hey guys. for some reason, my wishlist and quick view hover-over got mis-alinged on Related Products and Our Offers.

Also, the product containers themselves don’t “line up” with each other.

See screenshot and URL

Thanks!

Please, contact administrator
for this information.

#138900 Copied

25 Answers
Rose Tyler

Support staff

September 5, 2016 at 13:11
Hello,

You can add this code in Custom CSS:
```
.single-product .product .product-image-wrapper{
   display: table;
}
```
Please provide the screenshot for our better understanding what exactly don’t “line up” with each other. Please explain more details about it.

Regards,
Rose Tyler.
#138906 Copied
talonhead

Participant

September 6, 2016 at 04:39

Rose? I’ve never talked with you before here. Mostly Jack and Eva. Welcome!

I did include a screenshot previously…but let me add a little more detail to clarify. See screenshot.

BTW…that code snippet didn’t help. Now those icons are completely off the image. See video.

Please, contact administrator
for this information.

#138940 Copied

Eva Kemp

Support staff

September 6, 2016 at 07:48

Hello,

As I see some css styles are loading from cache. Delete it on your server in wp-content directory, also clear browser cache.

Regards,
Eva Kemp.

#138948 Copied

talonhead

Participant

September 6, 2016 at 10:10

I see that it works fine in Chrome…just not in FF. I’ve purged cache as well as browser cache. Are you saying it works just fine in FF?

Did you get my last request on the horizontal alignment of my product containers for Related Products and Our Offers?

#138975 Copied
Rose Tyler

Support staff

September 6, 2016 at 11:21
Hello,

Please change previous code to:
```
.single-product .content-product {
   text-align:center;
}
.single-product .product .product-image-wrapper{ 
   display:inline-block
}
.single-product .product .product-details .product-title {
   height: 3.2em !important;
}
```
Regards,
Rose Tyler.
#138982 Copied
talonhead

Participant

September 6, 2016 at 11:39

Thanks…that did the trick.

Anything we can do with the nav buttons? Don’t look that good against dark backgrounds. See attached.

Like have the stylings match my “up” button (on both static and hover) that is present on each page? http://prntscr.com/cer2jc

Please, contact administrator
for this information.

#138984 Copied
Rose Tyler

Support staff

September 6, 2016 at 12:17
Hello,

You can use this code:
```
.single-product .carousel-area .productCarousel .owl-controls .owl-prev, .single-product .carousel-area .productCarousel .owl-controls .owl-next{
  border: 1px solid #3d3d3d!important;
}
.single-product .carousel-area .productCarousel .owl-controls .owl-prev:hover, .single-product .carousel-area .productCarousel .owl-controls .owl-next:hover{
  background-color: #252525;
  border-color: #252525 !important;
  text-decoration: none;

}
.single-product .carousel-area .productCarousel .owl-controls .owl-prev:hover:before, .single-product .carousel-area .productCarousel .owl-controls .owl-next:hover:before{
  color: white;
}
```
Regards,
Rose Tyler.
#138993 Copied
talonhead

Participant

September 6, 2016 at 12:26

Nice. That worked fine. But it did raise another request. 🙂

Notice my current “up” page button has its border color removed when hovering. Try it out on the URL attached.

Please, contact administrator
for this information.

#138995 Copied

Rose Tyler

Support staff

September 6, 2016 at 12:43

Hello,

You need to write
border-color: #252525 !important;
in the previous code.

Regards,
Rose Tyler.

#138998 Copied

talonhead

Participant

September 6, 2016 at 14:37

I don’t understand. The previous code has nothing to do with changing my “up” button on the page.

#139017 Copied
Rose Tyler

Support staff

September 6, 2016 at 14:45
Oh, sorry.
Try this code:
```
.back-top a:hover {
  border-color: #3d3d3d;
}
```
Regards,
Rose Tyler.
#139019 Copied
talonhead

Participant

September 6, 2016 at 14:51

We’re getting there.

I need the background color hover activate the same time as the white up arrow does at hover. If you check closely, you’ll find that there is a delay between the two hovers.

#139021 Copied
Rose Tyler

Support staff

September 7, 2016 at 12:33
Hello,

You can use this code:
```
.back-top.bounceIn {
border: 1px solid #3d3d3d;
border-radius: 100%;
}
.back-top a {
border: 0 !important;
}
.back-top span:before {
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
}
```
Regards,
Rose Tyler.
#139108 Copied
talonhead

Participant

September 7, 2016 at 15:38

Wow. All that code for a simple action? lol Well regardless, it works fine now. Thank you!

One other thing:

See attached.

Please, contact administrator
for this information.

#139133 Copied
Jack Richardson

Support staff

September 8, 2016 at 08:46
Hello,

Please use this css code:
```
.single-product .product .product-details .product-title {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}
```
Best regards,
Jack Richardson.
#139187 Copied
talonhead

Participant

September 8, 2016 at 09:02

Thanks Jack. That did the trick once again! thank you!

On Quick View of products, what code can I use to play with background colors? The default one is white. As you well know, my background is dark…so text and whatnot doesn’t look that good. See attached screenshot.

Also, you can’t “X” out of the Quick View window. It doesn’t work. The “X” moves when clicked as well. You have to click outside the box to close it. Minor annoyance. See attached vid.

Please, contact administrator
for this information.

#139191 Copied
Jack Richardson

Support staff

September 8, 2016 at 12:51
Hello,

To change background color use the following css code:
```
.quick-view-popup {
    background-color: grey !important;
}
```
As for closing icon of Quick View the problem is caused by one of your plugins. Disable 3rd-party plugins, clear browser cache and check closing button after that.

Best regards,
Jack Richardson.
#139215 Copied
talonhead

Participant

September 9, 2016 at 08:37

Ahh I see. Well, thanks for the background code nonetheless. I’ll play with it.

The “Categories” title….round the corners 5? See attached.

Please, contact administrator
for this information.

#139264 Copied
Jack Richardson

Support staff

September 9, 2016 at 09:03
Hello,

Please use this css code:
```
.sidebar .woocommerce_product_categories .widget-title {
    border-radius: 5px;
}
```
Best regards,
Jack Richardson.
#139265 Copied
talonhead

Participant

September 9, 2016 at 12:28

Thanks jack.

Incidentally, on the “shop” page, the tap title for it is always “Product Archives-“. No matter what I do to change the title (as well as add a description for the page) it’s always the same.

Ideas on that?

http://prntscr.com/cfz75e

#139285 Copied

Jack Richardson

Support staff

September 9, 2016 at 13:00

Hello,

Please refer to this article:
https://kb.yoast.com/kb/how-do-i-change-the-woocommerce-shop-page-title/

Best regards,
Jack Richardson.

#139291 Copied

talonhead

Participant

September 9, 2016 at 13:09

Well lo and behold that worked. Thanks for the article!

I wonder why Yoast has a specific instruction for that but still allows you to edit the Shop page by itself like any other page.

#139292 Copied

Jack Richardson

Support staff

September 9, 2016 at 15:12

Hello,

You’re welcome.
You need ask plugin authors about it.

Best regards,
Jack Richardson.

#139304 Copied

talonhead

Participant

September 9, 2016 at 15:35

Ehhh…not that important. I’m still waiting for VC to address their PrettyPhoto issue with FF. Thanks again Jack. Always a pleasure.

#139309 Copied

Jack Richardson

Support staff

September 9, 2016 at 16:23

Hello,

You’re always welcome.

Best regards,
Jack Richardson.

#139313 Copied
Viewing 26 results - 1 through 26 (of 26 total)