Customize the buy button at the bottom of the tablet screen

I want to customize the buy button at the bottom of the tablet screen only, to be the same as the mobile screen. How do I fix this? It’s currently turned off because it displays a lot of product details like a laptop screen,

which overflows and makes the website look bad.

Attachments:

You must be logged in to view attached files.

Hello,

Please try to use the below custom CSS code and paste it to Theme Settings >> Custom CSS >> Global CSS section. Change the value as per your requirements.

@media (min-width: 1024px) and (max-width: 1366px) {
    .wd-sticky-btn {
        padding-top: 60px !important;
        background-color: white;
        box-shadow: none;
        display: none;
    }
    .wd-sticky-btn .wd-sticky-btn-cart {
        flex: 1 1 auto !important;
        margin-inline: 30px;
    }
    .wd-sticky-btn :is(.price, p.stock, .wd-buy-now-btn, .wd-action-btn, .wd-sticky-btn-content) {
        display: none;
    }

    .wd-sticky-btn form.cart {
        position: relative;
        margin-inline-end: 0 !important;
        width: 110% !important;
    }
    .wd-sticky-btn :is(.single_add_to_cart_button, .wd-sticky-add-to-cart) {
        width: 85% !important;
        border-radius: 0 !important;
    }
    .wd-sticky-btn-on .wd-sticky-btn {
        display: flex !important;
    }
}

    .wd-sticky-btn-on .wd-sticky-btn {
        display: flex;
    }
}

Best Regards,

I tried adding the CSS code, but it seems the code isn’t working correctly only on tablet screens.
I would like you to help me check it. Also, there’s an excessive white background with the color #FFFFFF that’s too tall.

How can I fix this?

Attachments:

You must be logged in to view attached files.

Hi,

To make the sticky “Sticky add to cart” button on tablets look the same as on mobile, you need to apply a special custom code. However, before applying it to your site, follow these preparatory steps:
1. Remove your custom code that scales the “Sticky add to cart” button and affects its actual boundaries, which prevents proper positioning. The code that needs to be removed is shown in the screenshot: https://monosnap.com/file/K5yUYInxPwXrcfVCFQCB89peXMxzEs.
2. Completely delete the custom code provided to you in this reply: https://xtemos.com/forums/topic/customize-the-buy-button-at-the-bottom-of-the-tablet-screen/#post-650107
3. Add the following custom code to the Tablet Custom CSS Area in Theme Settings:

:root {
	--wd-sticky-btn-height: 42px !important;
}

.sticky-toolbar-on .wd-sticky-btn {
	bottom: 55px !important;
}

.wd-sticky-btn {
	padding-block: 0;
	background-color: transparent;
	box-shadow: none;
	display: none;
}

.wd-sticky-btn .wd-sticky-btn-cart {
	flex: 1 1 auto;
	margin-inline: -15px;
}

.wd-sticky-btn :is(.price, p.stock, .wd-buy-now-btn, .wd-action-btn, .wd-sticky-btn-content) {
	display: none;
}

.wd-sticky-btn form.cart {
	position: relative;
	margin-inline-end: 0 !important;
	width: 100%;
}

.wd-sticky-btn :is(.single_add_to_cart_button, .wd-sticky-add-to-cart) {
	width: 100%;
	border-radius: 0 !important;
}

.wd-sticky-btn-on-mb {
	padding-bottom: var(--wd-sticky-btn-height);
}

.wd-sticky-btn-on-mb .wd-sticky-btn {
	display: flex;
}

.wd-sticky-btn-cart {
	--quantity-space: 80px;
}

.wd-sticky-btn-cart div.quantity {
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	z-index: 2;
	height: 100%;
	filter: brightness(0.95);
	transform: translate3d(0, 0, 0);
}

.wd-sticky-btn-cart div.quantity input[type] {
	height: 100%;
	border: none;
	background-color: var(--btn-accented-bgcolor);
	box-shadow: var(--btn-accented-box-shadow);
	color: var(--btn-accented-color);
	transition: all .25s ease;
}

.wd-sticky-btn-cart div.quantity input[type]:hover {
	filter: brightness(0.95);
}

.wd-sticky-btn-cart div.quantity input[type="button"] {
	min-width: 25px;
	border-radius: 0;
}

.wd-sticky-btn-cart div.quantity:not(.hidden)+.button,
.wd-sticky-btn-cart div.quantity:not(.hidden)+link+.button,
.wd-sticky-btn-cart div.quantity:not(.hidden)+link+link+.button {
	padding-inline-start: var(--quantity-space);
}

.wd-sticky-btn-cart div.quantity:not(.hidden)+.button:before,
.wd-sticky-btn-cart div.quantity:not(.hidden)+link+.button:before,
.wd-sticky-btn-cart div.quantity:not(.hidden)+link+link+.button:before {
	inset-inline-start: var(--quantity-space);
}

.wd-sticky-btn-cart div.quantity:not(.hidden)+.button:after,
.wd-sticky-btn-cart div.quantity:not(.hidden)+link+.button:after,
.wd-sticky-btn-cart div.quantity:not(.hidden)+link+link+.button:after {
	inset-inline-start: calc(50% - 9px + var(--quantity-space) / 2);
}

.wd-sticky-btn-cart div.quantity:not(.hidden)+.single_add_to_cart_button {
	padding-inline-start: calc(20px + var(--quantity-space));
}

.wd-sticky-btn-cart :is(div,
	.cart):hover>div.quantity input[type],
.wd-sticky-btn-cart :is(div,
	.cart):hover>div.quantity+.button {
	background-color: var(--btn-accented-bgcolor-hover);
	box-shadow: var(--btn-accented-box-shadow-hover);
	color: var(--btn-accented-color-hover);
}

.wd-sticky-btn-cart :is(div,
	.cart):active>div.quantity {
	bottom: var(--btn-accented-bottom-active);
}

.wd-sticky-btn-cart :is(div,
	.cart):active>div.quantity input[type],
.wd-sticky-btn-cart :is(div,
	.cart):active>div.quantity+.button {
	box-shadow: var(--btn-accented-box-shadow-active);
}

.wd-sticky-btn-cart div.quantity:active {
	bottom: 0 !important;
}

.wd-sticky-btn-cart div.quantity:active input[type],
.wd-sticky-btn-cart div.quantity:active+.button {
	box-shadow: var(--btn-accented-box-shadow) !important;
}

Kind Regards

Hello, Bogdan Donovan

Thank you very much.

if I want to move the plus/minus (+/-) sign a bit further to the left so it doesn’t fall off the screen edge, how can I manage and edit this part?

Attachments:

You must be logged in to view attached files.

Hi,

Your “Sticky Add to Cart” button appears cut off at the edges due to custom code on your site that modifies padding and transform properties. Here is a video demonstrating how the sticky “Add to Cart” button looks with and without this custom code (https://monosnap.com/file/P57aTcBUcFEXEtczAoJvaCkJ9q0zdH)

As we mentioned in our previous response in point one (https://xtemos.com/forums/topic/customize-the-buy-button-at-the-bottom-of-the-tablet-screen/#post-650454), before adding our code and to ensure your “Sticky Add to Cart” button displays correctly, this custom code needs to be removed.

Kind Regards

Thank you
Close Topic

[Author]

Posts