Foxy Forum Status

We're no longer responding to questions via our forum, but we will keep it up for historical reasons. If you can't find the answer you're looking for, please visit our knowledge base or contact us. If there's enough interest in the future, we may bring the forum back.

Where are template files located and how do I update them?

I forked your git repo and found that the default templates are the same as the ones in your email, receipt, checkout, and cart pages under your template menu. But how do I find and change the individual parts of these templates? For instance checkout.inc.twig
Comments
  • fc_adamfc_adam FoxyCart Team
    @jrwhip,

    Good question. The rest of the templates are also within our github repository - you'll find all of the templates that we make use of within that repo. For example, the checkout.inc.twig template is here: https://github.com/FoxyCart/2.0-templates/blob/master/checkout.inc.twig

    In terms of editing the twig templates that make up the actual checkout form - it depends on the types of changes you're wanting to make. Could you provide an overview of what you're wanting to do, and we can give you some tips on the best way to approach it.
  • Hi Adam,

    I do so the files on the repo, so really how I edit the templates that make up the actual checkout form is my question.

    I would like to add a line of text on the checkout page under the email input form that says "enter email to receive your receipt. No spam ever."

    In that same section I would like to change the link returning customers use to skip entering their password and checkout as a guest, from a link to a button.
  • fc_adamfc_adam FoxyCart Team
    @jrwhip,

    Thanks for confirming what you're looking to do. For what you described there, I'd recommend making use of Twig's embed functionality, which allows you to overwrite blocks within the template without needing to make use of the complete raw template. This also means that you'll still get any updates we apply to the template.

    As an example of adding in the additional text line you described, that would look like this - with the first and last embed lines appearing within the default checkout template already, so you'd replace those with this:
    {% embed 'checkout.inc.twig' %}
    {% block login_register %}
    {{ parent() }}
    <p class="spam-note">Enter email to receive your receipt. No spam ever.</p>
    {% endblock %}
    {% endembed %}
    After doing that, you'll see the text appear right below the login section of the checkout. You can then add styles to your checkout to make that look exactly as you want.

    Regarding altering the links to be buttons instead - I'd recommend approaching this from a CSS perspective. You can simply make those links look like buttons. It'll save having to edit the raw template and give you more freedom through styling.
  • Thanks Adam, That worked perfectly.

    How do I add custom CSS styles to the checkout page?

    I put some style in the head section:

    .fc-button-link {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    }


    But the styles were overridden.

    Also I would prefer to just change that one particular link to look like a button, while leaving the other links the same.
  • fc_adamfc_adam FoxyCart Team
    @jrwhip,

    The issue you'll be running into there is the CSS style specificity. While your styles will be present, the default styles will be overwriting them. Try specifying your selector as #fc .fc-password-action--guest .fc-password-action--button-container .fc-button-link { }

    That will both ensure your styles are more specific, and only apply to the "proceed as a guest" link.
  • That worked perfect. Thanks you.
Sign In or Register to comment.