Product Display issue in the homepage

dmozi313

i just realized 2 issues with the display in the homepage, please see blow under Software tab, it looks like this

but when i move the mouse over the product, it become like this

another issue is with the Hot & New product display in Position 2 & 3, the option Show Add to cart was disabled, when i turned it on it became like this

Completely different to the website design and template.

Kindly please Assist.

Thanks in advance

dominic

Hi dmozi313,
About the add to cart button, you can add the following CSS code:

div.product-container span.addtocart-button input.addtocart-button, span.addtocart-button input.addtocart-button, span.addtocart-button input.notify-button, div.vm-details-button a {
    color: #ffffff !important;
    background-color: #ff5a00 !important;
    border-color: #ff5a00 !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
}

I tried to hover the product in the Software tab, and it sill shows well.

dmozi313

dominic
hi Dominic

Thanks for your reply, regarding Add to Cart where do i add that code?

Regarding the Software Tab, i realized that when there is one product it starts playing up, i just disabled the 2nd product and it did it again, i will keep the 2nd product disabled so you can try and see,

looking forward for your reply.

Thanks in advance.

dominic

Hi dmozi313,
Add the CSS code to the: /templates/ja_megastore/css/custom.css file

I have checked and see that this section needs to show two or more products to work well when hover a product and other products will fix the height of the section.
If you want to fix it, you can use the CSS code:

.javm_slider[class*="-view"] .product.vm-col {
    min-height: 400px;
}

I think you should add more products

dmozi313

dominic

thanks for your reply, will try it later today and if any issue will let you know.

Thanks 🙂

dmozi313

dominic
hi Dominic

i added the code to the custom.css,it did change the template but its not organised, not the same size, while im using same image size in all products and categories.

Please see the screenshot

dominic

Hi dmozi313,
These modules will change the height when different about the content in the products.
I have added the following CSS code to your site:

.vmgroup.horizontal-product .bx-viewport .vm-customfields-wrap .product-fields .product-field,
.vmgroup.vertical-product .bx-viewport .vm-customfields-wrap .product-fields .product-field {
    display: flex;
    align-items: center;
}
.vmgroup.horizontal-product .bx-viewport,
.vmgroup.vertical-product .bx-viewport {
	height: 490px !important;
}

dmozi313

dominic

Thanks for your reply, i was wondering if its possible to make them the same size.

Thanks

dominic

Hi dmozi313,
I have updated the CSS code from the custom.css file, you can check it now.
Note: Please backup the site before updating.

dmozi313

dominic
Thanks for your help 🙂