Change Cs-Cart Variations On Product Page Frontend From Vertical To Horizontal

Store Builder Questions
1

When we create variations options , on the product page (front end) the variations selections are shown in vertical way. I want this to be in horizontal line instead as I am selling shoes. Please tell me how can I do this.



1211×308 127 KB

2

[quote name=‘cool999’ timestamp=‘1438075459’ post=‘224548’]

When we create variations options , on the product page (front end) the variations selections are shown in vertical way. I want this to be in horizontal line instead as I am selling shoes. Please tell me how can I do this.



1211×308 127 KB


[/quote]



Try this: http://www.cscart.bi…s-in-boxes.html

3

[quote name='JohnCarroll' timestamp='1438077876' post='224559']

Try this: http://www.cscart.bi…s-in-boxes.html

[/quote]



this is so expensive.

4

Any other way to do it with slight modification.

5

[quote name='cool999' timestamp='1438079141' post='224565']

Any other way to do it with slight modification.

[/quote]



Not sure I am not a developer, was just pointing you in the direction of a ready made addon.

6

Any other help???

7

The Product Box Option addon can solve this problem.

8

These addons are too expensive and overpriced. A slight modification can do the work. Any genuine help will be appreciated.

9

Hi,



Please try to add the following code:


.ty-product-options__elem li {
display: inline;
}




in the file: design/themes/responsive/css/styles.less



NOTE: this style will be apply for all options with radio buttons variants

NOTE: Don't forget to clean up the template cs-cart cache and browser cache to see the changes.



best regards,

WSA team

10

[quote name=‘Damir (WSA-team)’ timestamp=‘1438178993’ post=‘224777’]

Hi,



Please try to add the following code:

<br />
.ty-product-options__elem li {<br />
	display: inline;<br />
}<br />

```<br />
<br />
in the file: design/themes/responsive/css/styles.less<br />
<br />
NOTE: this style will be apply for all options with radio buttons variants<br />
NOTE: Don't forget to clean up the template cs-cart cache and browser cache to see the changes.<br />
<br />
best regards,<br />
WSA team<br />
[/quote]<br />
<br />
Thanks for this. It is working. <img src="upload://rA9Qa8gnUPZzRZRdI8kt3dpjkrs.png" class="bbc_emoticon" alt=":)">
11

Hi,

Please try to add the following code:

.ty-product-options__elem li {
    display: inline;
}
in the file: design/themes/responsive/css/styles.less

NOTE: this style will be apply for all options with radio buttons variants
NOTE: Don't forget to clean up the template cs-cart cache and browser cache to see the changes.

best regards,
WSA team

Can we make it in boxes like shown in the addon.

12

Try

.ty-product-options__elem li label {
    border: 1px solid grey;
    border-radius: 4px;
    box-shadow: 1px 1px 2px grey;
    padding: 2px 5px 2px 9px;
}
.ty-product-options__elem li {
    display: inline;
    padding-right: 3px;
}

Note that radio buttons will be visible in this case as there is no ability to add CSS rule to the label of the selected option variant without javascript

13

Try

.ty-product-options__elem li label {
    border: 1px solid grey;
    border-radius: 4px;
    box-shadow: 1px 1px 2px grey;
    padding: 2px 5px 2px 9px;
}
.ty-product-options__elem li {
    display: inline;
    padding-right: 3px;
}

Note that radio buttons will be visible in this case as there is no ability to add CSS rule to the label of the selected option variant without javascript

Thank You. Really Appreciate it. You are doing great work