How to add thumbnails to fancy button 5?

[justintuijl]

Hi, how can I modify a button?
My customer likes the fancy button 5 but also wants to list thumbnails on that button.
Is there a way for me to add the function to the button? The button 10 and 11 have the function for thumbnails.
In-fact, if I knew how to modify a button life would be good.
Thank you

[wzp]

Did you just say, that you wanted a way to add a product’s thumbnail to a button, as in appearing ON the button? Or did you mean to say, display a product thumbnail with the description, and the button?

• This reply was modified 2 years, 2 months ago by wzp.

[justintuijl]

“Thumbnails” as opposed to “thumbnail”
buttons 10 and 11 do several thumbnails
customer wants to show several on one button and button 5 is the nicest

[wzp]

You are trying to do this kind of display, using the [wp_eStore_fancy5 id=nnnnn] shortcode?

[justintuijl]

I am wanting to use button 5 with the multiple thumbnail style of buttons 10 and 11.
I am perfectly capable of coding and wonder if it is possible to modify button 5 to add in the multi-thumbnail code?

[admin]

If you are a coder then you can modify that template 5 to customize it and change how it looks on your site.

The following post maybe helpful for this topic:
https://support.tipsandtricks-hq.com/forums/topic/can-i-put-multiple-images-and-videos-in-the-fancy-display

[justintuijl]

Thanks. I tried to add the thumbnails code from button 11 to button 5. It didn’t work:

/*=== Fancy 5 CSS ===*/
.eStore-fancy5{
background:transparent url(“images/fancy5_gradient.gif”) bottom repeat-x;
background-color:#fff;
font-family:”Segoe UI”, sans-serif;
font-size:12px;
border:1px solid #ccc;
display:block;
float:left;
height:370px;
margin:3px 12px 12px 0;
position:relative;
width:222px;
padding:10px 0px 10px 10px;
}
.eStore-fancy5:hover{border-color:#999;}
.eStore-fancy5-thumb img {height: 150px; width: 200px; padding: 5px; border: 1px solid #ccc;}
.eStore-fancy5-thumb a img {border: 1px solid #ccc;}
.eStore-fancy5-thumb:hover img {border-color: #333;}

.eStore-additional-thumbnail-fancy-11{float:left;text-align:center;width:100px;}
.eStore-additional-thumbnail-fancy-11 img,.eStore-additional-thumbnail-fancy-11 a img {
background-color:#FFF;
border:1px solid #A9A9A9;
margin:0px 2px 2px 0px;
padding:1px;
width:16px;
height:16px;
}

.eStore-fancy5-body{height:165px;overflow:hidden;}
.eStore-fancy5-description{margin:0px 10px 5px 0px;text-align:justify;overflow:hidden;max-height:115px;}
.eStore-fancy5-product-name{font-size:15px;font-weight:bold;text-align: left;margin:12px 10px 10px 0px;}
.eStore-fancy5-price{float:left;font-size:15px;font-weight:bold;}
.eStore-fancy5-details{float:right;margin-right:10px}

[wzp]

If you are having coding difficulty, please complete a custom work order request, and a developer will get back with you.

[Author]

Posts