[Skip to main content](#vessel-content) # Customise the layout of the checkout page ## - **[Storm](/forum/user/42764-storm "View Storm's Profile")** - [![Storm's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42764-storm "View Storm's Profile") Topic Author - [ Offline](/forum/user/42764-storm) Less More - Posts: 70 - Thank you received: 1 - - 3 years 4 months ago [\#353231](#353231) by [Storm](/forum/user/42764-storm "View Storm's Profile") *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353231 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* was created by *[Storm](/forum/user/42764-storm "View Storm's Profile")* -- url of the page with the problem -- : [ store.alpha-electronics.com/](https://store.alpha-electronics.com/) -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: [ ![image1.png](/forum/attachment/57349) ](/forum/attachment/57349 "image1.png") How can this be done please? - [ ![image1.png](/forum/attachment/57349) ](/forum/attachment/57349 "image1.png") [ ](/forum/attachment/57349?download=1 "image1.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86541 - Thank you received: 14304 - - 3 years 4 months ago - 3 years 4 months ago [\#353233](#353233) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353233 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* Hi, The checkout workflow allows for 2 columns display. You need to add a separator in your checkout workflow : [ www.hikashop.com/support/documentation/4...ut-workflow.html#sep](https://www.hikashop.com/support/documentation/409-hikashop-checkout-workflow.html#sep) Last edit: 3 years 4 months ago by [nicolas](/forum/user/63-nicolas "View nicolas's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Storm](/forum/user/42764-storm "View Storm's Profile")** - [![Storm's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42764-storm "View Storm's Profile") Topic Author - [ Offline](/forum/user/42764-storm) Less More - Posts: 70 - Thank you received: 1 - - 3 years 4 months ago [\#353235](#353235) by [Storm](/forum/user/42764-storm "View Storm's Profile") Replied by *[Storm](/forum/user/42764-storm "View Storm's Profile")* on topic *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353235 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* Thank you, how can I show the cart totals on the right, rather than below the products in the cart? As shown in my example image Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86541 - Thank you received: 14304 - - 3 years 4 months ago [\#353237](#353237) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353237 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* Hi, First, you can configure your views like this: [ i.imgur.com/IhXUOYS.png](https://i.imgur.com/IhXUOYS.png) It will result in this: [ i.imgur.com/5PAzuvU.png](https://i.imgur.com/5PAzuvU.png) Then, you can use CSS code to hide the total rows on the left side and hide the product rows on the right side: Code: \#hikashop_checkout_cart_1_5 tbody tr:not(.row0):not(.row1) { display: none; } #hikashop_checkout_cart_1_8 tr.row0, #hikashop_checkout_cart_1_8 tr.row1, #hikashop_checkout_cart_1_8 thead { display: none; } #hikashop_checkout_cart_1_8 tbody{ border-top: none !important; } where you need to change the 5 and the 8 based on the ids of your views on your checkout. This will give you something like this: [ i.imgur.com/TWQM3nT.png](https://i.imgur.com/TWQM3nT.png) Then a bit more CSS to make it look closer to your screenshot and you'll be able to reproduce it. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Storm](/forum/user/42764-storm "View Storm's Profile")** - [![Storm's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42764-storm "View Storm's Profile") Topic Author - [ Offline](/forum/user/42764-storm) Less More - Posts: 70 - Thank you received: 1 - - 3 years 4 months ago [\#353261](#353261) by [Storm](/forum/user/42764-storm "View Storm's Profile") Replied by *[Storm](/forum/user/42764-storm "View Storm's Profile")* on topic *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353261 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* Thank you, can the column width be adjusted please? Also, how can I get the checkout button to show under the total costs (on the right)? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86541 - Thank you received: 14304 - - 3 years 4 months ago [\#353262](#353262) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353262 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* Hi, Well, you are already on the checkout, so there is no "go to checkout" button. The "next" button is displayed at the bottom. You might be able to move it a bit with CSS, but it's gonna be dirty and difficult for responsiveness. The width can be adjusted with CSS code. For example: Code: .hikashop_checkout_page_step1 .hkc-md-6:first-of-type { width: 75%; } .hikashop_checkout_page_step1 .hkc-md-6:last-of-type { width: 25%; } Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Storm](/forum/user/42764-storm "View Storm's Profile")** - [![Storm's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42764-storm "View Storm's Profile") Topic Author - [ Offline](/forum/user/42764-storm) Less More - Posts: 70 - Thank you received: 1 - - 3 years 3 months ago [\#353407](#353407) by [Storm](/forum/user/42764-storm "View Storm's Profile") Replied by *[Storm](/forum/user/42764-storm "View Storm's Profile")* on topic *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353407 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* Thanks for your reply and help so far. Is there anyway to add the code and the Next button to be part of the column on the right? I know you said it can be done but would be dirty, I really need the Next button (in our case we've renamed it to be Checkout) to be under the cart prices on the right, as shown in my original image. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Storm](/forum/user/42764-storm "View Storm's Profile")** - [![Storm's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/42764-storm "View Storm's Profile") Topic Author - [ Offline](/forum/user/42764-storm) Less More - Posts: 70 - Thank you received: 1 - - 3 years 3 months ago [\#353408](#353408) by [Storm](/forum/user/42764-storm "View Storm's Profile") Replied by *[Storm](/forum/user/42764-storm "View Storm's Profile")* on topic *[Customise the layout of the checkout page](/forum/27-checkout/906690-customise-the-layout-of-the-checkout-page#353408 "-- url of the page with the problem -- : store.alpha-electronics.com/ -- HikaShop version -- : 4.7.4 -- Joomla version -- : 3.10.11 -- PHP version -- : 7.4.33 I need to customise the layout of the checkout page, I know I can use the Checkout Worflow, but this only puts the layout into a 1 column for me, I'm looking to achieve a layout similar to here: How can this be done please?")* I've worked out how to do it now, it was surprisingly simple using the following code: (function() { jQuery("#hikabtn_checkout_next") .detach() .appendTo("#hikashop_checkout_cart_1_4"); })(); The following user(s) said Thank You: [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL2NoZWNrb3V0LzkwNjY5MC1jdXN0b21pc2UtdGhlLWxheW91dC1vZi10aGUtY2hlY2tvdXQtcGFnZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.066 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)