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

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