On this checkout page:
there are total 6 products 3 is with price and 3 is zero price
1x Coussin- 29.90€
1x Coussin- 39.90€
2x Coussin- 59.80€
1x Housse de rechange- 0€
2x Housses de rechange- 0€
1 Livre électronique-0€
Now I need something like: when customer select/choose this product: 1x Coussin- 29.90€
in the order summary should not add any free product
but when customer select/choose this product: 1x Coussin- 39.90€
in the order summary should add this free product :1x Housse de rechange- 0€
but when customer select/choose this product: 2x Coussin- 59.80€
in the order summary should add these free products :
2x Housses de rechange- 0€
1 Livre électronique-0€
Then After clicking the Submit button on the Confirmation page the product should visible only selected products:
I did this code already, For now for any secection on the confirmation page all the free products are added:
.hide-force {
display: none !important;
}
.order-summary .os-inner-container .os-items .os-price p:nth-child(2) strong, .product-list .pl-items .pl-price p:nth-child(2) strong {
color: #13193b !important;
}
.order-summary .os-inner-container .os-items .os-price p:nth-child(3) span, .product-list .pl-items .pl-price p:nth-child(3) span {
color: #000 !important;
}
.order-summary .os-items {
padding: 8px 0px !important;
}
.right-sidebar .os-price p strong {
font-size: 26px !important;
color: #13193b !important;
}
@media (max-width: 768px) {
.order-summary .os-items {
padding: 8px 0px;
}
}
@media (max-width: 768px) {
.offers-check {
padding-left: 15px !important;
padding-right: 15px !important;
}
.p-hypen-tag p em {
font-size: 8px !important;
}
}
@media (max-width: 768px) {
.offers-1 {
margin-left: 0px !important;
margin-right: 0px !important;
}
}
@media (max-width: 400px) {
.p-hypen-tag p em {
font-size: 6px !important;
}
}
.checkhero {
position: relative;
padding-top: 50px !important;
padding-bottom: 50px !important;
}
@media (max-width: 768px) {
.checkhero {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
}
.checkhero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: 0.4;
z-index: 1;
}
.checkhero > * {
position: relative;
z-index: 2;
}
.orderCheckoutProduct .container-box .pl-items .pl-price span.pl-pvalue p:nth-child(2) strong {
color: #13193b !important;
font-size: 26px !important;
}
.orderCheckoutProduct .container-box .pl-items .pl-price span.pl-pvalue p:nth-child(3) span {
color: #000 !important;
}
.product-main-class .pl-items {
display: grid;
gap: 16px;
padding-top: 33px;
}
.product-main-class .pl-item {
background-color: #f9f9f9;
box-shadow: 0 4px 3px #00000012, 0 2px 2px #0000000f;
}
.product-main-class .pl-item .pl-name {
width: 50%;
}
.product-main-class .pl-item .pl-price {
min-width: auto;
text-align: center;
width: 50%;
flex: 1;
}
.product-main-class span.pl-pvalue h1 {
line-height: 1;
margin-bottom: 0px;
}
.product-main-class span.pl-pvalue h1 strong {
font-size: 12px !important;
}
span.pl-pvalue span {
font-size: 20px !important;
font-weight: 700;
color: #13193b;
}
.product-main-class span.pl-pvalue p s:nth-child(1) {
color: #6d6d6d !important;
font-size: 16px !important;
display: block;
color: #fff;
padding: 2px 8px;
border-radius: 50px;
display: table;
margin-left: auto;
}
.product-main-class span.pl-pvalue p s:last-child {
color: #13193b;
}
.product-main-class .pl-item .pl-name .pl-nvalue {
position: relative;
font-weight: 600;
}
.product-list .pl-item .pl-name .pl-nvalue span.name {
font-size: 16px;
font-weight: 900;
text-align: left;
color: #13193b;
}
.product-main-class .pl-item .pl-image {
width: 150px;
height: 100%;
margin: 0;
border: none;
background: transparent;
}
.product-main-class .pl-item.small.selected {
background-color: #fafefa;
}
.product-main-class .pl-item .pl-inner:hover {
background: transparent;
}
.product-main-class .pl-item {
position: relative;
overflow: inherit;
}
.right-sidebar .os-price h1 {
line-height: 1;
margin-bottom: 10px;
}
.right-sidebar .os-price h1 strong {
font-size: 12px !important;
}
.right-sidebar .os-price p s:nth-child(1) {
color: #6d6d6d !important;
font-size: 16px !important;
display: block;
}
.right-sidebar .os-price p strong:nth-child(1) {
color: #13193b !important;
font-size: 20px !important;
}
.right-sidebar .os-price span {
font-weight: 700;
color: #13193b;
border-radius: 50px;
padding: 4px 7px;
font-size: 12px;
display: inline-block;
margin-bottom: 3px;
}
.right-sidebar .os-price p s:last-child {
color: #13193b;
}
.right-sidebar .os-row .os-price {
min-width: 250px;
}
.product-list .pl-item input.pl-radio {
position: absolute;
left: 5px;
top: 55px;
}
.product-main-class .pl-item .pl-name {
flex-direction: column-reverse;
justify-content: flex-end;
gap: 18px;
align-items: baseline;
flex: 0 !important;
}
.p-hypen-tag p {
display: flex;
align-items: center;
font-weight: 600;
font-size: 14px;
margin-bottom: 4px;
}
.p-hypen-tag p img {
width: 32px;
height: auto;
margin-right: 5px;
border-radius: 5px;
}
.p-hypen-tag p em {
background-color: #13193b;
color: #fff;
display: flex;
padding: 4px 7px;
border-radius: 2px;
margin-left: 5px;
font-size: 10px;
}
.product-list .pl-item .pl-inner {
flex-wrap: wrap;
}
span.pl-pvalue {
text-align: right;
color: #13193b;
font-size: 20px;
font-weight: 600;
}
.pl-item.small.selected label.pl-inner {
background: #dff3e8;
border: 2px #13193B solid;
}
.product-list .pl-item .pl-name input {
accent-color: #13193B;
}
.pl-items .pl-item.small:nth-child(1) .pl-price p:nth-child(1) {
color: #fff;
padding: 2px 0px;
border-radius: 50px;
font-size: 12px;
font-weight: 600;
text-align: right;
}
span.pl-pvalue p span:nth-child(1) {
color: #0E8390 !important;
padding: 2px 8px;
border-radius: 50px;
font-size: 12px !important;
font-weight: 600;
display: table;
margin-left: auto;
}
span.pl-pvalue p s {
color: #13193b;
}
span.pl-pvalue p:nth-child(1) span {
color: #fff !important;
}
.right-sidebar .os-price p:nth-child(3) span {
color: #0E8390 !important;
}
.order-summary .os-row .os-price {
max-width: 100% !important;
}
@media(max-width: 768px) {
.product-main-class .pl-items {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.checkout_main_custom .container.el-504683 {
display: flex;
flex-direction: column;
align-items: center;
}
.checkout_main_custom .container-box {
width: 85% !important;
}
.checkout_main_custom .container.el-411237, .checkout_main_custom .container.el-454282 {
margin: 0 !important;
}
}
@media(max-width: 480px) {
span.pl-pvalue p span:nth-child(1) {
font-size: 10px !important;
}
.product-main-class .pl-item .pl-price p strong {
font-size: 11px !important;
}
span.pl-pvalue p span:nth-child(1) {
font-size: 10px !important;
}
.product-main-class .pl-item .pl-image {
width: 90px;
}
.order-summary .os-row .os-price {
min-width: 160px;
}
.order-summary .os-row .os-price p strong {
font-size: 20px !important;
}
.p-hypen-tag p em {
padding: 4px 4px;
}
.pl-item.small.selected .p-hypen-tag p em {
padding: 4px 1px !important;
}
}
@media(max-width: 600px) {
.checkout_main_custom .container-box {
width: 100% !important;
}
.product-main-class .pl-item .pl-name {
padding-left: 10px;
}
}