Cart page design issues

  • Resolved reghta

    (@reghta)


    2 years, 11 months ago

    Hi,

    1- The plugin moves the Apply Coupon button and causes a vertical misalignment of buttons see here how it looks before plugin and see here how it looks after enabling the plugin.

    2- The input box for entering the number of points and the text about number of available points are so far off from the Apply Points button that it becomes difficult to understand. Would be nice to have the same style with the Apply Coupon input box.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello

    Thanks for using our plugin.

    You may be having CSS conflicts due to the theme. You can also run a test by changing the theme.
    You can modify this by adding custom CSS according to your need.

    Regards,

    Thread Starter reghta

    (@reghta)

    Thank you, we will fix this on our side but would be good to have this working out of the box.

    Our theme is Neve from Themeisle and we are using the latest versions of WP, WC, the theme and also the plugin.

    That’s great,

    By adding the custom CSS you can fix the compatibility issues and make it work according to your need.

    Regards,

    Thread Starter reghta

    (@reghta)

    Hi,

    We did 3 things:

    1- Tried fixing it ourselves and improved the desktop?version.

    2- Tested WooCommerce’s official Storefront theme a try. However the mobile design is not working properly there either, see the?screenshot (although acknowledging this setup might still have been impacted by our existing code snippets / plugins)

    3- Reached out to the theme developer and they said it might be due to the plugin not using different classes appropriately. Still they were kind enough to offer some improvements for the mobile version.

    Ask:?Could you please adopt these improvements so that everyone can benefit from these and that we do not have to manage separate CSS files? Also would be great if you could make sure to have a good UI for the standard Woocommerce theme Storefront and also popular themes like Neve ??

    /*DESKTOP CSS, IN HOUSE*/

    
.woocommerce #content table.cart td.actions .input-text, .woocommerce table.cart td.actions .input-text, .woocommerce-page #content table.cart td.actions .input-text, .woocommerce-page table.cart td.actions .input-text{
  margin-left:30px;
 width: 170px;	
}

.shop_table.cart .mwb_wpr_apply_custom_points #mwb_cart_points{
 margin-left: 60px;
 border-style:solid;
 border-color: grey;
 background-color: white;
 border: 1px solid #d3ced2;
}

.mwb_wpr_apply_custom_points{
 width: 87%;
}

.woocommerce #respond input#submit.disabled, .woocommerce #respond input#submit:disabled, .woocommerce #respond input#submit:disabled[disabled], .woocommerce a.button.disabled, .woocommerce a.button:disabled, .woocommerce a.button:disabled[disabled], .woocommerce button.button.disabled, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled], .woocommerce input.button.disabled, .woocommerce input.button:disabled, .woocommerce input.button:disabled[disabled]{
 opacity: 1;
 margin-top: -40px;
 width: 47%;
}

    /* MOBILE CSS, THEMEISLE – THE THEME DEVELOPER */

    
.shop_table.cart .mwb_wpr_apply_custom_points #mwb_cart_points {
? ? height: auto!important;
}
input#mwb_cart_points {
? ? border-style: solid!important;
? ? border-color: var(--formFieldBorderColor)!important;
? ? border-width: var(--formFieldBorderWidth)!important;
? ? border-radius: var(--formFieldBorderRadius,3px)!important;
? ? background-color: var(--formFieldBgColor)!important;
? ? color: var(--formFieldColor)!important;
? ? padding: var(--formFieldPadding)!important;
? ? text-transform: var(--formFieldTextTransform)!important;
? ? font-weight: var(--formFieldFontWeight)!important;
? ? font-family: var(--bodyFontFamily)!important;
? ? font-size: var(--formFieldFontSize)!important;
? ? letter-spacing: var(--formFieldLetterSpacing)!important;
? ? line-height: var(--formFieldLineHeight)!important;
? ? width:100%!important;
? ? max-width: unset!important;
? ? margin-bottom:5px!important
? ? }

? ? .mwb_wpr_apply_custom_points {
? ? ? ? float: none!important;
? ? ? ? padding-bottom: 0.5em!important;
? ? ? ? /* height: 430px; */
? ? }
button#mwb_cart_points_apply {
? ? cursor: pointer;
? ? box-sizing: border-box;
? ? background-color: var(--secondaryBtnBg);
? ? color: var(--secondaryBtnColor);
? ? border-style: solid;
? ? border-color: currentColor;
? ? fill: currentColor;
? ? border-width: var(--secondaryBtnBorderWidth,0);
? ? border-radius: var(--secondaryBtnBorderRadius,3px);
? ? padding: var(--secondaryBtnPadding,7px 12px);
? ? font-weight: var(--btnFontWeight,700);
? ? font-size: var(--btnFs,var(--bodyFontSize));
? ? line-height: var(--btnLineHeight,1.6);
? ? letter-spacing: var(--btnLetterSpacing);
? ? text-transform: var(--btnTextTransform,none);
? ? border-radius: 9px!important;
}

.mwb_wpr_apply_custom_points p {
? ? width: 49%!important;
? ? display: inline-block!important;
}

@media only screen and (min-width: 769px) {
? ? ? ? input#mwb_cart_points {
? ? ? ? ? ? max-width: 170px!important;
? ? ? ? ? ? display:inline-block!important;
? ? ? ? }
? ? button#mwb_cart_points_apply {
? ? ? ? display:inline-block!important;
? ? ? ? width:auto;
? ? ? ? margin-right:0px;
? ? }
}
.woocommerce-cart table.cart td.actions .coupon {
? ? margin-left: 0px!important;
}

button#mwb_cart_points_apply {
? ? padding: 12px!important;
? ? margin: 0!important;
}

.woocommerce-cart-form__contents button.button {
? ? padding: 13px!important;
? ? min-width:180px!important
}

@media only screen and (min-width: 960px) {
button#mwb_cart_points_apply {
? ? padding: 16px!important;
}
}
    Plugin Author WP Swings

    (@wpswings)

    Hi,

    Thanks for your kind suggestion, we will surely look into it and will definitely try to add this into our upcoming updates.

    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Cart page design issues’ is closed to new replies.