Cart not mobile friendly

Support
#3

Please see the secure note

#4

Hello Sharon,

I tried checking the site’s cart page and it seems to be correctly responsive. See screenshot in Secure Note.

Were you already able to get this sorted?

#5

Hi Jade,
Please change the theme to Store Front and add the product in the secure note to the cart - you’ll see how we need it to look and react - your theme omits essential fields (such as the price per unit)
Thanks
Sharon

#6

How can I add a secure image?

#7

And one unrelated question, please where is WOO’s Shortcode Generator button?
Thanks

#8

Hello Sharon,

The price were hidden because there is not enough space left. If you want to display it, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px){
  .woocommerce .cart.shop_table .product-price {
    display: table-cell;
  }
}

And you’ll have this layout:

If ever you want to replicate the design in Store front like this:

Then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px){
  .woocommerce .cart.shop_table,
  .woocommerce .cart.shop_table tbody,
  .woocommerce .cart.shop_table tr {
    display: block;
    width: 100%;
  }
  
  table.shop_table_responsive thead {
      display: none;
  }
  table.shop_table_responsive tr td {
      display: block;
      text-align: left;
      clear: both;
      float:  none;
  }

  table.shop_table_responsive tr td::after, table.shop_table_responsive tr td::before {
      content: '';
      display: table;
  }

  table.shop_table_responsive tr td::after {
      clear: both;
  }

  table.shop_table_responsive tr td[data-title]::before {
      content: attr(data-title) ": ";
      font-weight: 600;
      float: right;
  }
}

Please let us know if this works out for you.

1 Like
#9

Thank You very much for the quick and detailed response.
All has been implemented and works great, it’s just that on mobile we get duplicated info which we fixed with this addition to the CSS - could you see if this is the right fix or perhaps you have a better one?
.woocommerce .cart-collaterals table th {
display:none;
}

B4

After

#10
  • Any news about where is WOO’s Shortcode Generator button?
  • Can you please help us with making the Categories responsive so on desktop we’ll have 6 columns / Ipad 4 / and mobile 2?
#11

Hi Sharon,

With duplicates, hiding the other is the only fix and your CSS is correct and working.

About the shortcode, are you referring to this https://wordpress.org/plugins/woocommerce-shortcodes/? We’re not fully familiar with other Woocommerce features, you may contact the plugin author. And if you’re referring to other shortcodes within our builder, they aren’t implemented to make the editor more minimal.

And unfortunately, the max columns for products in is 4, adding more would require customization including additional breakpoints. With that, I recommend contacting a developer for proper implementation :slight_smile:

Thanks!

#12

Thanks Rad - Of course we hoped for different news - max 4 columns per category is very limited…
Is there a way for the Price under a Product with bulk pricing to display the range in the category and product page? ( as it does for variable products) Thanks & Merry Christmas
Sharon

#13

Hi Sharon,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with customizations. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding,

#14

Hoping for some good for this question:
How can we add “category top content” so I can put different blocks to each category before the content?
Thanks
Sharon

#15

Hello Sharon,

Thanks for updating in! The category pages can only have the category titles and the category descriptions. You can simply edit each of the categories and add an archive title and the archive description. Adding a different blocks will require you to modify the theme.

I would recommend that you create global blocks in X > Global blocks first and then take note of the global block shortcode. And then since the child theme is set up, please add the following code in your child theme’s functions.php file

// Add custom block for Renew stack
// =============================================================================
function add_custom_block(){ ?>
  
  <?php if ( is_category('category_name_a') ) : ?>

    <?php echo do_shortcode("[cs_gb id=123]"); ?>

  <?php elseif ( is_category('category_name_b') ) : ?>

    <?php echo do_shortcode("[cs_gb id=456]"); ?>

  <?php endif; ?>

<?php }
add_action('x_before_view_renew__landmark-header', 'add_custom_block');
// =============================================================================

Change the category name in to cdeo above and also just make sure that you have replace the shortcode [cs_gb id=123] with the correct shortcode of the global block that you have created. To know more about Global Blocks, please check this out: https://theme.co/apex/forum/t/global-blocks/24723

Hope this helps.

#16

Thanks but we need the block to be before the content so the H1 and content would be after the banner…
And please correct me if I am wrong - this solution will create one global block or if I am supposed to create this change in functions.php file for each category this would create a huge file and will slow the site > we have a lot of categories and blocks that we’ll need to match

#17

Hi Sharon,

Yes, that will add the content on top of your category page, and yes you’ll need to create one Global Block for one category.

If you need something that is dynamic, then you need to copy the _landmark-header.php file on your child theme and edit that duplicate _landmark-header.php file, find this line:

<?php elseif ( is_category() || x_is_portfolio_category() || x_is_product_category() ) : ?>

And do your dynamic content underneath that line, If you edit your categories you’ll see a Description field in there, you can actually output that on the category page by using <?php echo category_description(); ?>.

Function Reference/category description
Customizations - Best Practices

Please be reminded that this is a customization and falls outside of the support that we can offer, you may wish to contact a developer to help you on this.

Thanks,

#18

It’s really disappointing to see that many features that we have builtin on other themes that we use fall outside of the support that X offers. This is my third X purchase and the other 2 sites weren’t e-commerce so the lack of these essential features went unnoticed. So much time/money wasted and it looks like we’ll need to buy another theme as it makes no sense to proceed with X limited e-commerce / shop features

#19

Hi @DC-Team,

We can’t really provide custom development in the forum, but it doesn’t mean it’s not customizable. We gave some instructions that should also serve as a guide and a starting point. The theme is a framework type which meant for development preventing further bloat features.

And this modification isn’t related just related to Woocommerce, but to the theme too, which have different features and structures than other themes. Still, the integration between our theme and Woocommerce is just template level, it shouldn’t affect Woocommerce functionalities. But yes, the column limitation is the downside, and it’s meant to be like that for better readability. Still, you can add this to your child theme’s functions.php

function x_woocommerce_shop_columns_override ($column) {
return 5;
}
add_filter( 'loop_shop_columns', 'x_woocommerce_shop_columns_override' );

You can see all the implemented function for Woocommerce integration in /x/framework/functions/plugins/woocommerce.php file.

Thanks for understanding.

#20

Thanks Rad - As we are still deciding how to proceed the AMP issue came up (this question is very relevant also for our other X sites)
As support recommends using external AMP plugins - which AMP plugin works well with X ?

  • From what I have read in the Forum there was an issue with cornerstone - was it resolved?
#21

Hi @DC-Team,

Please try this https://wordpress.org/plugins/amp/, I checked and the last testing was March-April and works okay with Automattic’s AMP plugin. Though, you may still post issues related to this as there are versions released from that time which may still cause issues.

Thanks!

#22

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.