Documentation You are here: start » v » 2.0 » templates

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
v:2.0:templates [2017/06/14 15:50] – [Other Common Customizations] marijav:2.0:templates [2025/06/03 21:44] (current) – [Minor Styling Customizations] foxybrett
Line 35: Line 35:
   * Adding a Terms of Service (TOS) checkbox and link.   * Adding a Terms of Service (TOS) checkbox and link.
   * Newsletter opt-in checkbox.   * Newsletter opt-in checkbox.
-  * Color settings to control the major color styles on the cart, checkout and receipt.+  * Color settings to control the major color styles on the cart, checkout and receipt. To change the color of all your buttons, take a look at [[v:2.0:templates:change_button_colors|this article]].
   * Product option hiding. You can hide product options or your own custom product options using the ''Customize Cart Display'' checkbox. Hide weight, code, category, subscription details, custom options, or all options. This will hide the items in the list for which you've removed the checkbox from the cart, checkout, web receipt, and email receipt.   * Product option hiding. You can hide product options or your own custom product options using the ''Customize Cart Display'' checkbox. Hide weight, code, category, subscription details, custom options, or all options. This will hide the items in the list for which you've removed the checkbox from the cart, checkout, web receipt, and email receipt.
-  * Customize what credit cards you support. (If you don't accept AmEx, uncheck that box. Note that this only changes the display, not what your payment gateway actually accepts.) +  * Customize (remove or add) what credit card options you support. (If you don't accept AmEx, uncheck that box. Note that this only changes the display, not what your payment gateway actually accepts.)  
-  * Credit card security code requirements. (Required, optional, etc.)+  * Credit card security code requirements. (Required, optional, etc.) [[v:2.0:templates:credit card options|Step by Step instructions here]]
   * Change what billing checkout fields are required and displayed. (Don't collect the address info if you aren't shipping. Require a phone field. Etc.) Note: If you have shippable products present in the cart, the complete shipping address is always require.   * Change what billing checkout fields are required and displayed. (Don't collect the address info if you aren't shipping. Require a phone field. Etc.) Note: If you have shippable products present in the cart, the complete shipping address is always require.
   * Add custom content (HTML, JS) to your templates, for custom styles, tracking codes or custom fields on your checkout.   * Add custom content (HTML, JS) to your templates, for custom styles, tracking codes or custom fields on your checkout.
   * Enable debug logging to your browsers console.   * Enable debug logging to your browsers console.
-  * Shipping and billing country/region whitelisting/blacklisting. If you only want to accept customers or to ship to certain countries, you can do that here.+  * Shipping and billing country/region allowing/blocking. If you only want to accept customers or to ship to certain countries, you can do that here. Step-by-step instructions for allowing or blocking are [[v:2.0:templates:blacklist_whitelist_countries|here]].
  
 +==== Minor Language Customizations ====
 +
 +Much of the language of the Foxy cart, checkout, and receipt can be modified in the TEMPLATES [[https://admin.foxycart.com/admin.php?ThisAction=Internationalization|language]] customization of the Foxy admin. Expand each area or show all details to see the strings available for you to customize.
 ==== Minor Styling Customizations ==== ==== Minor Styling Customizations ====
  
 Using the custom code template setting, it's now possible to add CSS and javascript to your templates //without needing to modify the templates themselves//. If you just want to change the background, some colors or styling, or anything else you accomplish with CSS only, we strongly recommend taking this approach.  Using the custom code template setting, it's now possible to add CSS and javascript to your templates //without needing to modify the templates themselves//. If you just want to change the background, some colors or styling, or anything else you accomplish with CSS only, we strongly recommend taking this approach. 
  
-You can customize your styling in the TEMPLATES configuration settings by checking the ''Add custom header and footer code to your templates'' and inserting your styles in the ''custom header:'' text box like this:+You can customize your styling by going to settings -> templates and finding the "custom header" or "custom footer" sections (or the "template config" in the legacy admin), like this:
  
 <code> <code>
Line 70: Line 73:
   * [[https://getfirebug.com/|Firebug (Plugin available for browsers)]]   * [[https://getfirebug.com/|Firebug (Plugin available for browsers)]]
  
-If you want to really customize, read on!+ 
 +==== Customising the SVG Icons ==== 
 + 
 +Within the cart and checkout there are a few instances of SVG icons that are used for things like arrows and padlocks. Styling these elements are a little different than above, as you need to target the source element of the icon and alter it using ''fill''. The following are the different icons that we currently include and their default fill colors (some may have different colors applied in specific locations that differ to the following): 
 + 
 +<code css> 
 +/* Used within continue shopping button on full-page cart/checkout */ 
 +#fc .fa-angle-double-left, 
 +#fc .fc-cancel-continue-shopping svg { 
 +  fill: #666; 
 +} 
 +/* Used within continue shopping button on sidecart */ 
 +#fc .fa-caret-left, 
 +#fc .fc-sidecart-only-fixed .fc-fixed-button-left svg { 
 +  fill: #FFF; 
 +} 
 +/* Used within top proceed to checkout button on sidecart */ 
 +#fc .fa-caret-right, 
 +[data-fc-sidecart] #fc .fa-caret-right, 
 +#fc .fc-sidecart-only-fixed .fc-fixed-button-right svg { 
 +  fill: #888; 
 +} 
 +/* Used within bottom proceed to checkout button on sidecart and credit card field on tablet/mobile checkout */ 
 +#fc .fa-lock, 
 +#fc-cart .fc-action--checkout--button svg, 
 +#fc .fc-checkout__section--payment svg.fc-svg-icon--lock { 
 +  fill: #C1DB9B; 
 +} 
 +/* Used within payments section on full-size checkout */ 
 +#fc .fa-lock-large, 
 +#fc .fc-checkout__section--payment svg#fc-icon-lock-large { 
 +  fill: #EEE; 
 +} 
 +/* Used within remove coupon option */ 
 +#fc .fa-times-circle, 
 +#fc .fc-transaction__discounts .fc-action--close svg { 
 +  fill: #666; 
 +} 
 +/* Used within shipping fields on sidecart */ 
 +#fc .fa-truck, 
 +#fc .fc-address-entry svg { 
 +  fill: #999; 
 +} 
 +/* Used within tax fields on sidecart */ 
 +#fc .fa-bank, 
 +#fc .fc-address-entry svg { 
 +  fill: #999; 
 +} 
 +/* Used within address validation modal */ 
 +#fc .fa-map-marker { 
 +  fill: #999; 
 +} 
 +</code> 
 + 
 +Use any of the applicable CSS rules above, altering the fill color code to customise as needed. 
 + 
 + 
 +==== Common responsive CSS media queries ==== 
 + 
 +If you are adding custom styles, you may have a need to apply different styles based on the viewport the user is using. The following are the common media queries we utilise in our default styles to match into similar break points as us. You would just need to use the specific queries here based on your specific style requirements: 
 + 
 +<code css> 
 +@media (max-width: 480px) { 
 + 
 +} 
 +@media (min-width: 768px) { 
 + 
 +} 
 +@media (min-width: 768px) and (max-width: 991px) { 
 + 
 +} 
 +@media (min-width: 992px) { 
 + 
 +} 
 +@media (min-width: 992px) and (max-width: 1199px) { 
 + 
 +} 
 +@media (min-width: 1200px) { 
 + 
 +} 
 +</code>

Page Tools

Site Tools