Adjust the sticky add to cart (Should show product picture and buy now button )

Product page stick add to cart showing incorrectly. Its only shows quantity and add to cart .its not looking user friendly. I need custom css/jss to modify the sticky add to cart.
Sticky add to cart should show product main picture and buy now button .

I attached some examples how it should looks like as my recommendation.

Please note- my bottom mobile hight is 60 px

So please also adjust the sticky add to cart hight also according to other elements.

Its best if it could possible to hide mobile buttom menu when stick add to cart appears.

Attachments:

You must be logged in to view attached files.

Please note that- the changes should on mobile devices.

Pc version looks good.

Hello,

The appearance of the sticky “Add to Cart” on mobile looks the way it does because it is impossible to fit all the desktop content on the narrow screens of mobile devices without distorting it. That is why the button design appears more minimalist compared to the desktop version. Additionally, this option has a separate setting to enable or disable the sticky “Add to Cart” for mobile devices: https://monosnap.com/file/XfiEB5e1tpEvMKhoooDlNVqrulal9Q.

If you still want to additionally show the main image and the price, you can use the following code, but keep in mind that adding extra elements will distort the appearance of the existing ones due to the limited width space.

Following code need to be placed in Global CSS area in theme settings:

@media (max-width: 769px) {
	
	body .wd-sticky-btn {
		background-color: var(--bgcolor-white);
		--wd-sticky-btn-height: 80px;
	}
	
	body .wd-sticky-btn .wd-sticky-btn-content {
		display: flex !important;
	}
	
	body  .wd-sticky-btn .price {
		display: block !important;
	}
	
	body .wd-sticky-btn .wd-entities-title {
		display: none;
	}
	
	body .wd-sticky-btn .wd-sticky-btn-cart {
		margin-inline: 0px;
		justify-content: flex-end;
	}
	
	body .wd-sticky-btn .star-rating {
		display: none;
	}
	
	body .wd-sticky-btn.wd-quantity-overlap div.quantity {
		position: static;
		height: auto;
		filter: unset;
	}
	
	body .wd-sticky-btn.wd-quantity-overlap div.quantity input[type] {	 height: auto;
	  border: var(--wd-form-brd-width) solid var(--wd-form-brd-color);
    background: var(--wd-form-bg);
    box-shadow: none;
		color: var(--wd-form-color);
		min-height: var(--btn-height);
	}
	
	body .wd-sticky-btn.wd-quantity-overlap div.quantity input[type="number"] {
	width: 30px;
    border-radius: 0;
    border-right: none;
    border-left: none;
	}
	
	body .wd-sticky-btn div.quantity .minus {
	    border-start-start-radius: 35px !important;
    	border-end-start-radius: 35px !important;
	}
	
	body .wd-sticky-btn  div.quantity .plus {
	    border-start-end-radius: 35px !important;
   	 border-end-end-radius: 35px !important;
	}
	
	body .wd-quantity-overlap :is(div,.cart):hover > div.quantity input[type] {
		background-color: transparent;
	}
	
	body .wd-sticky-btn :is(.single_add_to_cart_button,.wd-sticky-add-to-cart) {
		width: auto;
		border-radius: var(--btn-accented-brd-radius) !important;
		padding: 5px 15px !important;
	}
	
	body .wd-sticky-btn form.cart {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 5px;
		width: auto;
	}
}

After adding this code, you also need to adjust the height of the sticky mobile “Add to Cart” to accommodate the new content height. To do this, use the “Height on mobile” option in the theme settings https://monosnap.com/file/zZIvul8AL7rMjuZe1LOT5VbszHogqK.

If you have changed the height of the mobile bottom navigation bar from 55px to 60px, use the following code to adjust the position of the sticky “Add to Cart”

@media (max-width: 1024px) {
	
	body.sticky-toolbar-on .wd-sticky-btn {
		bottom: 60px;
	}
}

Kind Regards

[Author]

Posts