Checkout & Cart Page content alignment
I have installed Newspaper Kids Store theme on my site http://www.sunerzy.in. I am facing problem with cart page and checkout page alignments. Cart & Checkout forms are overflowing the screen instead of aligning with the website title/logo. I tried to fix this using custom css but not able to solve. Can you please help. Screen shots attached.
Checkout Page Screenshot: https://sunerzy.in/doc/sunerzy-in-checkout.pdf
Cart Page Screenshot: https://sunerzy.in/doc/sunerzy-in-cart.pdf
Hi,
Ok, I see that you have the default shortcodes from theh woo plugins and not the shortcode from tagDiv Composer, therefore, those are coming with a custom css that has the width set on 1400px instead of 1200px – https://i.imgur.com/e9hNz8a.png
Now the simplest and fastest solution in this case is a stronger css like this one:
body .td-pb-span12 .alignwide {
width: 1200px;
}
This css should be set in the theme panel > custom code > custom css.
I hope this will help you!
I applied the css you suggested. This fixed the problem for the desktop but displays in case of mobile devices remains unchanged, body content touching the device edges. Please advice.
Hi,
For this, please use this custom css for mobile :
body .td-pb-span12 .alignwide {
width: auto!important;
}
Set the code in the theme panel > custom code > advance css > phone – https://prnt.sc/gmHKEhHeMQeQ
Thank you!
Thanks, this css is working on both desktop & mobile device. Will it work on every devices ? I could not check with tab or on iphone !
One moe thing… On the cart page the “Process to Checkout” appearing like a text link. I want to make it a button. Where can I set it in that way ?
Hi,
I tested the website on a few gadgets we have and it seems to be ok on all of them – https://i.imgur.com/oT8ezBg.png
To add a bit of button style on the cart page, you can use this custom css:
.cart .wc-block-cart .wc-block-cart__submit-container a
{
background-color: #17c57a;
color: #fff;
border-radius: 4px;
border: 1px solid transparent;
}
.cart .wc-block-cart .wc-block-cart__submit-container:hover a
{
background-color: #0fa062;
text-decoration: none;
}
Thank you for the help. I applied your recommendations and all working fine now. Now I am encountering one problem. There is a “Latest Products” sections on the home page lower section. I am not able to figure out that on what basis the filter is taking place. New product entries are not automatically getting displayed in this section. I have set Product Categories Filter as “All Categories” but still recent enteries are not displaying !
Hi,
Please edit the homepage using tagDiv Composer and select the block that displays the latest products. In the General tab, check if there is a number set in the Offset field. If a number is set, it will skip that number of products—for example, if it’s set to 3, the block will skip the latest 3 articles and display the ones after them.
What you should do is remove any number in that field and leave it empty. This will ensure the block displays all the latest products without skipping any.
Thank you, it worked… One more thing, how to replace the hero image of the Shop page ? Not finding active element to relace the image on shop page.
Hi,
The hero image can be replaced using the tagDiv Composer, edit the page and select the row element https://prnt.sc/026P7AMwJ1Sn – and look in css tab for the backgroun image https://prnt.sc/ElCD7lyLt1Iz
Thank you!
Is it possible to display “Add to Cart” button under each product listing at Shop page. Currently “Add to Cart” button available only at the single product display page.
Hi,
I think that you want to do it like this -https://demo.tagdiv.com/newspaper_shop_watches_store/ if yes, then it can be done use tagDiv Composer, select the Woo product block and search for the button option, which should be under the Layout tab. https://prnt.sc/NdCypAZ3uyd5
In my website, the product variation option (watt) is displaying as a dropdown, refer https://sunerzy.in/product/flood-light/. I want to show these options as selection buttons side by side. How can I implement this ?
Hi,
What you need to do is to edit the product cloud template with tagDiv Composer https://i.imgur.com/A8mrOXi.png, then select the Woo Add to Cart element and check the attributes tab, from there you can choose the button element https://i.imgur.com/sS5vyUl.png.
I hope this will help you!
In the main menu (td-demo-header-menu) how different “Product Category” links are added ? I checked with the menu but could not understand how these category links added in the menu ? Please help.
Please ignore my earlier post (Apr 22, 2026 at 10:37 am). I have resolved it….. But there is another issue… In the main shop page, products are getting displayed (indexed) as per the entry date/time but in the Product Category display pages, products are appearing randomly. How can we set a display order here ?
Please ignore my earlier post (Apr 22, 2026 at 11:10 am). I have resolved it…. There is another issue… In the category product listing pages, currently 3 rows / 4 columns are being displayed. How to increase the number of rows, say I want to display 20 products per page in 5 rows (4 products per row). ? – Found option to display products in main shop pages but not getting any control for product category pages.
Hi,
First, I’m glad that you managed to resolve the problems from Apr 22, 2026 at 10:37 am and Apr 22, 2026 at 11:10 am.
Now related to teh question with the number of products, this can be set by using tagDiv Composer https://prnt.sc/qfc_AIskvJdT, edit the template, select the products and change the number for Limit products number: https://prnt.sc/zgVlFUJ-hoxL
-> https://prnt.sc/qA948NZIer4x
-> https://prnt.sc/kEouA9zMmg8L
Thank you!
