Editing Addon Social Buttons And Other Things On Product Details Page

Store Builder Questions
1

Where do I edit the text of this Facebook button addon, to wrap down so it doesn't just into the next column of product options? (see image). Also how do I remove the Availability/in stock line from the product details page? (same image).

[attachment=10683:Capture.PNG]

Also on this second image, how do I widen the space where the option dropdown boxes are to make it wider to bring the dropdowns back up to be next to the option label?

[attachment=10684:Capture2.PNG]

Capture.PNG

Capture2.PNG

2

Also how do I remove the Availability/in stock line from the product details page? (same image).

design/themes/YOUR_THEME/templates/blocks/product_templates/default_template.tpl

remove the following part of code:

{assign var="product_amount" value="product_amount_`$obj_id`"}
{$smarty.capture.$product_amount nofilter}

Where do I edit the text of this Facebook button addon, to wrap down so it doesn't just into the next column of product options?

Try to select different button layouts:

http://prntscr.com/9pwzoa

Also on this second image, how do I widen the space where the option dropdown boxes are to make it wider to bring the dropdowns back up to be next to the option label?

Unfortunately the issue is not quite clear.

3

Your first two fixes solved my issues, thank you eComLabs! :grin:


For the third issue, I am referring to the width of the product option drop-down menus, "Fragrances A-I" and "Fragrances J-Z" in the image. They're too wide which is causing them to be placed a line down, below the option title. If you see the two options above them, "Color" and "Scented or Natural", the option drop-down list is next to them and not below them.

[attachment=10687:Capture.PNG]

Capture.PNG

4

Try to add the following rule to the CSS section of the theme editor:

.ty-product-options__item select {
    max-width: 200px;
}

Please with width value to get best look and feel

5

That's not yielding any results and I've tried different width values. I do already have this code in there for the label part of the option. Would it be more similar to this?

.control-group.product-list-field > label {
    width: 180px;
}
6

That's not yielding any results and I've tried different width values. I do already have this code in there for the label part of the option. Would it be more similar to this?

.control-group.product-list-field > label {
    width: 180px;
}

The provided code was tested on default Responsive theme. Please let me know that theme do you use?

7

I use the Basic. I intent to change to the responsive theme but am afraid it will be like starting over.

8

I do not have installations with the basic theme at the moment. Please PM me URL of the page with issue

9

Hello Brennie,

It is advisable not to remove the following part of code:
{assign var="product_amount" value="product_amount_`$obj_id`"}
{$smarty.capture.$product_amount nofilter}

In order to solve this issue, please open the "view.tpl" file (design/themes/YOUR_THEME/templates/views/products/view.tpl)

and replace this part of code:

show_product_amount=true

by this one:

show_product_amount=false

That's not yielding any results and I've tried different width values. I do already have this code in there for the label part of the option. Would it be more similar to this?

Try to add the following rule to the CSS section of the theme editor:

.control-group.product-list-field > select {
    max-width: 200px;
}
Sincerely yours,
CS-Market team.
10

That last CSS code worked, thank you!

I don't remember what line that code is I need to put back in to the default_template file, or does it matter?

Hello Brennie,

It is advisable not to remove the following part of code:
{assign var="product_amount" value="product_amount_`$obj_id`"}
{$smarty.capture.$product_amount nofilter}

In order to solve this issue, please open the "view.tpl" file (design/themes/YOUR_THEME/templates/views/products/view.tpl)

and replace this part of code:

show_product_amount=true

by this one:

show_product_amount=false

Try to add the following rule to the CSS section of the theme editor:

.control-group.product-list-field > select {
    max-width: 200px;
}
11

It is advisable not to remove the following part of code:

What is the difference? Core files are change in both cases. If you want this changes to be compatible with future upgrade, it is required to override the view.tpl file or use hook in it.

Brennie369, do not worry about that changes.

12

Ok, thanks.