The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Dynamic CSS Boxes in the Checkout

jclemen14jclemen14 Member
in Help edited May 2013
Hey All,

I added 2 boxes below the "cart" on the right hand side of my checkout. The problem is that when my cart gets 3 or more items placed in it, the cart get covered up by these 2 side boxes. I want to know if there is a way to get these boxes to move down as more items get added to my cart? I have tried making them dynamic, but I only am able to do this with the checkout form on the right. I think this is due to the cart being a place holder in the checkout. Here is a link to a product page on my website: product page. Any help is greatly appreciated!


  • fc_adamfc_adam FoxyCart Team

    As you're on 1.1 - I'd actually suggest making use of the Twig templating to place the custom boxes in your template. I'd also suggest not absoluting placing the cart panel in CSS. If you take out the absolute positioning and top/right/bottom/left style attributes - I took them off from #fc_checkout_cart, #fc_cart_container and #fc_cart_container_inner - that will still position the cart as it was with the absolute positioning present.

    Next, I'd actually add those custom boxes within the cart markup - so it will be position right below the cart table. To do that, navigate to your cart template page in your stores FoxyCart administration and select the 'Use a custom cart template' checkbox. In that template, you'll copy in the Twig version of the cart, with your custom boxes in there too. You can grab the Twig cart template from this page: You can either paste that template straight into the textbox, or save it locally to your server and cache it like you do other templates. Next, within that cart markup, look for this line:
    </div></div><!-- #fc_cart_container_inner, #fc_cart_container -->

    Within that line, place your custom boxes code between those two closing div calls.

    Once you've got that saved, you'll need to edit your checkout template to change the placeholder call from ^^cart^^ to {{ custom_cart }}

    Then if you cache and save your checkout template, you should see the custom cart you just created in your checkout page - but the normal cart, receipt and email will be as per usual.
  • Thanks Adam! That worked.
Sign In or Register to comment.