Problems with dropdown menu in mobile phone view checkout page

Hi!

I’ve downloaded a plugin called ‘Local Pickup Plus’ and I’ve had some problems with it. Most of the problems are solved by the support of this plugin what is great! But there is one problem left that they can’t fix. I’ve posted their last reply in the private content area.

The problem is at the checkout page, opened on a mobile phone (in this case an Iphone). I’ve added a screenshot that compares the cart page with the checkoutpage. The checkoutpage needs to be the same as the cartpage. The cart page was already fixed by the support of the plugin. They say they cant fix the cartpage.

I’ve had the same problems at the desktop view but they fixed these problems with custom CSS. The only problem left is with the mobile view at the checkoutpage.

How can this be fixed? Thanks in advance!!

Attachments:

You must be logged in to view attached files.

Hello,

Your site is under construction.
Please insert the site admin access into the Private content below the message area.

Best regards

See private content area.

Hello,

The scroll appears when the table content does not fit the screen. This content does not fit the screen due to additional content that is added by the third parties plugin. In order to remove this scroll, and reduce the paddings around the table ensuring more space, please add this code to the Theme Settings > Custom CSS > Global:

.website-wrapper .wd-table-wrapper {
	 overflow-x: visible;
}

@media (max-width: 575px) {
	
	.website-wrapper .checkout-order-review {
    padding: 10px;
	}
}

Best Regards

Hello,

This doesn’t solve the probleem. The dropdown menu is still not completely visible. The setup on the check out page needs to be the same as the cart page, then the dropdown menu is full visible and the problems is then solved. The word ‘Ophaalpunt Kiezen’ needs to be above the dropdown menu as at the cartpage, this solves all problems. Do you have a CSS code that applies that change? Thanks in advance!

Hello,

Your cart order table was modified by custom code. Cart and checkout tables have different HTML structures and can’t be styled by the same custom code.

To achieve your desired look first you need:

1. Remove all your custom CSS code related to the checkout page order table.
2. Add the following custom CSS to the mobile custom CSS area in theme settings to change your checkout order table layout on mobile.

.website-wrapper .checkout-order-review {
   padding: 10px;
}

.woocommerce-checkout-review-order .wd-table-wrapper {
	 overflow-x: visible;
} 

.woocommerce-checkout-review-order .shop_table {
		display: flex;
    flex-direction: column;
}

.woocommerce-checkout-review-order .shop_table > thead,
.woocommerce-checkout-review-order .shop_table > tbody {
		display: table;
}

.woocommerce-checkout-review-order .shop_table > tfoot {
		display: flex;
    flex-direction: column;
}

.woocommerce-checkout-review-order .shop_table .cart-subtotal,
.woocommerce-checkout-review-order .shop_table .order-total {
		display: flex;
		justify-content: space-between;
}

.woocommerce-checkout-review-order .shop_table .woocommerce-shipping-total {
		display: flex;
    flex-wrap: wrap;
}

.woocommerce-checkout-review-order .shop_table .woocommerce-shipping-total th,
.woocommerce-checkout-review-order .shop_table .woocommerce-shipping-total td {
		width: 100%;
    max-width: 100%;
		text-align: left;
}

.woocommerce-checkout-review-order .shop_table #shipping_method {
	margin-right: 0;
}

.woocommerce-checkout-review-order .woocommerce-shipping-total th {
	 padding-bottom: 0;
   border-bottom: 0;
	 border-bottom: 0;
}

After implementing these changes your checkout order table should look like on the screenshot (https://prnt.sc/26m9km4)

Kind Regards

Problem is fixed. Thankyou!!!

We are always happy to help you, write to us when you have any difficulties or issues with our theme.

We would be grateful for 5 stars rate on http://themeforest.net/downloads in case you are satisfied with our theme and customer service

Thank you in advance

[Author]

Posts