`Continue shopping` notice on mobile

[treibalen]

Continue shopping notice on mobile is broken into two lines, but doesn't look very good:

Full Size: https://cld.wthms.co/t6rxbF

As a suggestion, is it possible to leave the “Sample product” has been added to your cart. line and Continue shopping button on separate lines?

Originally reported in https://wordpress.org/support/topic/continue-shopping-not-formatted

[rogeriodec]

I made these messages to turn it into responsive columns, that is, when the screen is small, the "<a href" part is a row below and the message is a row above. For this, I had to change the /woocommerce/includes/wc-notice-functions.php file, function wc_kses_notice, as below:

function wc_kses_notice( $message ) {

// ***** ROGERIO DEC (BEGIN) 

$pos1 = strpos($message, '<a href');

if ($pos1 !== false) {
    $pos2 = strpos($message, '</a>', $pos1) + 4;
    $link = substr($message, $pos1, $pos2 - $pos1);
    if ($pos1 == 0) {
        $p1 = substr($message, $pos2);
    }
    else {
        $p1 = substr($message, 0, $pos1);
    }

    $message = '<div class="Rtable Rtable--3cols Rtable--collapse">';
    $message .= '<div class="Rtable-cell">';
    $message .= $p1;
    $message .= '</div>';
    $message .= '<div class="Rtable-cell">';
    $message .= $link;
    $message .= '</div></div>';
}

// ***** ROGERIO DEC (END) 

    return wp_kses( $message,
        array_replace_recursive( // phpcs:ignore PHPCompatibility.PHP.NewFunctions.array_replace_recursiveFound
            wp_kses_allowed_html( 'post' ),
            array(
                'a' => array(
                    'tabindex' => true,
                ),
            )
        )
    );
}

Also, in my style.css child theme, I inserted this responsive css pack:

/*-----------------------------------------------------------------------------------------------------
/* Tables
================================== */
.Rtable {
  display: flex;
  flex-wrap: wrap;
  /* margin: 0 0 3em 0; */
  padding: 0;
}
.Rtable-cell {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;
  padding: 0.8em 1.2em;
  overflow: hidden;
  list-style: none;
}
.Rtable-cell > h1,
.Rtable-cell > h2,
.Rtable-cell > h3,
.Rtable-cell > h4,
.Rtable-cell > h5,
.Rtable-cell > h6 {
  margin: 0;
}
/* Table column sizing
================================== */
.Rtable--2cols > .Rtable-cell {
  width: 50%;
}
.Rtable--3cols > .Rtable-cell {
  width: 33.33%;
}
.Rtable--4cols > .Rtable-cell {
  width: 25%;
}
.Rtable--5cols > .Rtable-cell {
  width: 20%;
}
.Rtable--6cols > .Rtable-cell {
  width: 16.6%;
}
/* Alignment
==================================== */
.Rtable-cell--alignTop, 
.Rtable-cell--alignMiddle, 
.Rtable-cell--alignBottom { display: flex; }

.Rtable-cell--alignTop { align-items: flex-start; }
.Rtable-cell--alignMiddle { align-items: center; }
.Rtable-cell--alignBottom { align-items: flex-end; }

.Rtable-cell--alignLeft { text-align: left; }
.Rtable-cell--alignCenter { text-align: center; } 
.Rtable-cell--alignRight { text-align: right; }
/* Responsive
==================================== */
@media all and (max-width: 700px) {
  .Rtable--collapse {
    display: block;
  }
  .Rtable--collapse > .Rtable-cell {
    width: 100% !important;
  }
  .Rtable--collapse > .Rtable-cell--foot {
    margin-bottom: 1em;
  }
}
.no-flexbox .Rtable {
  display: block;
}
.no-flexbox .Rtable > .Rtable-cell {
  width: 100%;
}
.no-flexbox .Rtable > .Rtable-cell--foot {
  margin-bottom: 1em;
}

This solves the problem.

But now I'm worried that a new version of WooCommerce will override the modifications I made to /woocommerce/includes/wc-notice-functions.php. How to keep these changes in new versions of WooCommerce?

[StefsterNYC]

Can't you just CSS it and leave all the code and hooks out?

@media only screen and (max-width: 600px) {
  .woocommerce-message .button.wc-forward{
     width:100% !important;
     text-align:center;
 }

.woocommerce-message a{
   text-align:center;
   width:100% !important;
   border:none !important;

}
.woocommerce-message ::after{
    display:none !important;
   }
}

[rogeriodec]

Can't you just CSS it and leave all the code and hooks out?

@media only screen and (max-width: 600px) {
  .woocommerce-message .button.wc-forward{
     width:100% !important;
     text-align:center;
 }

.woocommerce-message a{
   text-align:center;
   width:100% !important;
   border:none !important;

}
.woocommerce-message ::after{
    display:none !important;
   }
}

You are right. It worked. Thank you!

[nagpai]

Issue may be related to Woo Core since it can be replicated on Videomaker Theme (WPcom) - Blockbase theme family

35642216-hc

[nagpai]

Adding a small snippet to what @StefsterNYC shared above to reorder the continue shopping button below the message text

@media only screen and (max-width: 600px) {
  .woocommerce-message .button.wc-forward{
     width:100% !important;
     text-align:center;
      order: 999;
 }

.woocommerce-message a{
   text-align:center;
   width:100% !important;
   border:none !important;

}
.woocommerce-message ::after{
    display:none !important;
   }

.woocommerce-message {
    display: flex;
    flex-direction: column;
}}