1. Shopin
  2. Wednesday, 28 February 2018
Hi,

The product page doesn't show the variant option properly. Please check the link below:

http://52.3.65.152/index.php/products/categories/printed-duvet-cover/amelia-duvet-cover-set

The simple product is good:

http://52.3.65.152/index.php/products/categories/printed-duvet-cover/adelaide-duvet-cover-set

How the variant option product get the same style like the simple product?

Thanks,
Accepted Answer
Hi,
Please, use this css into your custom css


.j2store-single-product.variable .product-content {
padding-top: 57px;
}
.j2store-single-product.variable .product-content .product-sku span {
font-size: 14px;
letter-spacing: 1.87px;
}
.j2store-single-product.variable .product-content .product-title {
margin: 0 0 20px;
}
.j2store-single-product.variable .product-content .price-sku-brand-container {
margin: 0 -15px;
border: 0;
padding: 0;
}
.j2store-single-product.variable .product-content .product-decs .product-sdesc {
font-size: 14px;
color: #4A4A4A;
}
.j2store-single-product.variable .product-content .product-price {
margin: 28px 0 10px;
}
.j2store-single-product.variable .product-content .product-price .sale-price {
font-size: 26px;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form {
position: relative;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form .options span {
display: none;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form .options span.j2error {
display: inline-block;
font-style: normal;
background: #eea236;
color: #fff;
padding: 5px 15px;
margin-bottom: 35px;
border-radius: 3px;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form .options br {
display: none;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form .options input {
display: none;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form .options b {
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1.87px;
display: inline-block;
width: 110px;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form .options label {
font-size: 14px;
border: 1px solid #EDEDED;
display: inline-block;
letter-spacing: 1.87px;
text-transform: uppercase;
padding: 5px 10px;
line-height: 1;
margin-bottom: 0;
margin-right: 4px;
cursor: pointer;
}
.j2store-single-product.variable .product-content .j2store-addtocart-form .options .option {
margin-bottom: 15px;
}
.j2store-single-product.variable .product-content .cart-action-complete {
padding: 10px 25px;
bottom: -80px;
width: 59.3%;
}
.j2store-single-product.variable .product-content .cart-action-complete p {
padding: 0;
}
.j2store-single-product.variable .nav.nav-tabs {
border-bottom: 0;
margin: 94px 0 20px;
}
.j2store-single-product.variable .nav.nav-tabs li {
margin: 0 18px 0 0;
}
.j2store-single-product.variable .nav.nav-tabs li a {
padding: 0;
border-width: 0 0 2px;
border-color: transparent;
color: #AFAFAF;
font-size: 20px;
font-weight: 600;
padding-bottom: 7px;
}
.j2store-single-product.variable .nav.nav-tabs li a:hover,
.j2store-single-product.variable .nav.nav-tabs li a:focus {
background: transparent;
}
.j2store-single-product.variable .tab-content div,
.j2store-single-product.variable .tab-content p {
font-size: 14px;
color: #4A4A4A;
font-weight: 300;
}
.j2store-single-product.variable .tab-content .table.table-striped {
margin-top: 29px;
}
.j2store-single-product.variable .sp-module.banner-ad-2 {
margin-top: 102px;
}
.j2store-single-product.variable .sp-module .sppb-section .sppb-section-title {
margin-bottom: 50px;
}
.j2store-single-product.variable .sp-module .sppb-section .sppb-section-title .sppb-title-subheading {
font-size: 14px;
color: #333333;
letter-spacing: 1.87px;
text-transform: uppercase;
}


The bottom sections ain't included in this category . But if you want that please use this code

<!-- Custom Module Position -->
<?php
jimport('joomla.application.module.helper');
$modules = JModuleHelper::getModules('shopin-product-details');
$attribs['style'] = 'sp_xhtml';

foreach ($modules as $key => $module) {
echo JModuleHelper::renderModule($module, $attribs);
}
?>
<!-- Custom Module Position -->
into the marked location
templates/shaper_shopin/html/com_j2store/templates/bootstrap3/view_variable.php
https://prnt.sc/ilpp18

-Thanks
  1. more than a month ago
  2. Shopin
  3. # Permalink
Responses (11)
Hi,
Thanks for your query. Please use this css into custom css field

.variable-product .product-image {
position: relative;
}
.variable-product .product-image .j2store-product-additional-images {
position: absolute;
left: 15px;
top: 0;
}
.variable-product .product-image .j2store-product-additional-images ul {
padding: 0;
margin: 0;
list-style: none;
}
.variable-product .product-image .j2store-product-additional-images ul li {
width: 65px;
margin-bottom: 10px;
display: block;
}
.variable-product .product-image .j2store-mainimage {
padding-left: 75px;
}
.variable-product .product-image .j2store-mainimage .j2store-product-main-image {
width: 100%;
}

Custom css field is here https://prnt.sc/ijudw8

-Best Regards
  1. more than a month ago
  2. Shopin
  3. # 1
Hi Sifat,

Thanks for your help. It works. However,

1. how can I make the radio opinion the same look like simple product?

Please check the link again:

http://52.3.65.152/index.php/products/categories/printed-duvet-cover/amelia-duvet-cover-set

simple product: http://52.3.65.152/index.php/products/categories/printed-duvet-cover/amelia-duvet-cover-set

2. Also the style of "Description"?

3. There are missing modules under the product description. (product-details-ad1, product-details-ad2 and FAQ)

Thanks,
  1. more than a month ago
  2. Shopin
  3. # 2
Hi Sifat,

Thanks for your help. It works.:D

When click each option, there is no black border.

http://52.3.65.152/index.php/products/categories/printed-duvet-cover/amelia-duvet-cover-set

Thanks,
  1. more than a month ago
  2. Shopin
  3. # 3
You are most welcome
  1. more than a month ago
  2. Shopin
  3. # 4
Hi Sifat,

http://52.3.65.152/index.php/products/duvet-cover-set/north-home/amelia-duvet-cover-set

When click each option, there is no black border. Please check the above link.

Thanks,
  1. more than a month ago
  2. Shopin
  3. # 5
Hi,
Please use this javascript code here https://prnt.sc/inybm0

let labels = document.querySelectorAll('.j2store-single-product.variable .product-content .j2store-addtocart-form .options label');
labels.forEach(function(label) {
label.onclick = function() {
this.style.border == '1px solid rgb(0, 0, 0)' ? this.style.border = '1px solid #ededed' : this.style.border = '1px solid #000';
}
});


-Thanks
  1. more than a month ago
  2. Shopin
  3. # 6
Hi Sifat,

I put the javascript in the main.js. The size option still missing the border on the default size. (I already set the default size for Twin) When I click each size it will show the black border, however when I click another one. The previous one will be still shown. Please check the link below:

http://52.3.65.152/index.php/products/duvet-cover-set/north-home/amelia-duvet-cover-set

Thanks,
  1. more than a month ago
  2. Shopin
  3. # 7
Hi,
Please use this js code instead of the previous one

let labels = document.querySelectorAll('.j2store-single-product.variable .product-content .j2store-addtocart-form .options label');
labels.forEach(function(label) {
label.onclick = function() {
labels.forEach(function(e) {
e.style.border = '1px solid #ededed';
});
this.style.border == '1px solid rgb(0, 0, 0)' ? this.style.border = '1px solid #ededed' : this.style.border = '1px solid #000';
}
});


-Thanks
  1. more than a month ago
  2. Shopin
  3. # 8
Hi Sifat,

Thanks for the code. When I click each option, it works now. But can the default size has the border? For now I should click each size, it should be one size in default.

Thanks,
  1. more than a month ago
  2. Shopin
  3. # 9
Hi,
You can change anything in the code.
If any problem arises then please post a question on this forum.
And definitely i'll help you there.

-Thanks
  1. more than a month ago
  2. Shopin
  3. # 10


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.