{"id":1966648,"date":"2025-09-03T08:23:55","date_gmt":"2025-09-03T12:23:55","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?p=1966648"},"modified":"2026-04-10T18:30:26","modified_gmt":"2026-04-10T22:30:26","slug":"customing-tickets-commerce","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/customing-tickets-commerce\/","title":{"rendered":"Customizing Tickets Commerce"},"content":{"rendered":"\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"h-creating-custom-views\">Creating Custom Views<\/h2>\n\n\n\n<p>Tickets Commerce looks good out of the box, but sometimes you may have another look in mind or you need to tweak the plugin to ensure compatibility with your theme. Don&#8217;t worry, you can modify the Tickets Commerce templates to your liking. In order to make that happen, simply make a copy of the template and add it to your child theme folder with your desired modifications.<\/p>\n\n\n\n<p>We have a <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/tickets-commerce-template-files\/\" target=\"_blank\" rel=\"noreferrer noopener\">full list of available templates<\/a> for Tickets Commerce in the Knowledgebase.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-hide-the-coupon-code-field\">Hide the Coupon Code Field<\/h2>\n\n\n\n<p>If you&#8217;re aren&#8217;t planning to offer coupon codes, you might want to simplify the checkout experience by removing the &#8220;Add coupon code&#8221; field. Event Tickets does not provide a built-in option to disable or hide the coupon code field directly within the Tickets Commerce settings. However, you can easily hide it using a small CSS snippet.<\/p>\n\n\n\n<p>To remove the coupon code field from your checkout page:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Log in to your WordPress Dashboard<\/li>\n\n\n\n<li>Go to <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong><\/li>\n\n\n\n<li>Add the following CSS:<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>.tec-tickets-commerce-checkout-cart__coupons {<br>  display: none !important;<br>}<\/code><\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li>Click <strong>Publish<\/strong> to save changes.<\/li>\n<\/ol>\n\n\n\n<p>This CSS rule will hide the coupon field for all users during the checkout process.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-custom-success-page-content\">Custom Success Page Content<\/h2>\n\n\n\n<p>By default, the Tickets Commerce success page text is not editable within the settings as it&#8217;s being loaded from a template file directly.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1490\" height=\"803\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/11\/Image-2024-11-27-at-11.14.50-AM.png\" alt=\"\" class=\"wp-image-1963503\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/11\/Image-2024-11-27-at-11.14.50-AM.png 1490w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/11\/Image-2024-11-27-at-11.14.50-AM-300x162.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/11\/Image-2024-11-27-at-11.14.50-AM-1024x552.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/11\/Image-2024-11-27-at-11.14.50-AM-768x414.png 768w\" sizes=\"auto, (max-width: 1490px) 100vw, 1490px\" \/><\/figure>\n\n\n\n<p>However, modifying the success page content is possible with a bit of customization.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>First, you&#8217;ll need to connect to your site directory using FTP or the panel (like cPanel) that your host provider gives you.<br><\/li>\n\n\n\n<li>Copy the <code>order.php<\/code> file from <code>wp-content\/plugins\/event-tickets\/src\/views\/v2\/commerce\/order\/description<\/code> and add it under the following path to prevent your copy from being overwritten during the next plugin update:<br><code>[your-child-theme]\/tribe\/tickets\/v2\/commerce\/order\/description\/<\/code><br><\/li>\n\n\n\n<li>Open the file in a text editor, customize the text at line 31, and save the file.<br><br><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"442\" class=\"wp-image-1963005\" style=\"width: 760px;\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/09\/order.png\" alt=\"\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/09\/order.png 1287w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/09\/order-300x175.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/09\/order-1024x596.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/09\/order-768x447.png 768w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/li>\n<\/ol>\n\n\n\n<p>Now make a test purchase and see the changes on the success page after completing the purchase.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-manual-webhook-creation-for-stripe\">Manual Webhook Creation for Stripe<\/h2>\n\n\n\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/6qTRIh1Tpx8\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n\n\n\n<p>Webhooks are used by Stripe to communicate with your site. It provides information such as the status of the payment and is used to update the ticket orders based on certain events from Stripe\u2019s side of things.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:var(--global-palette8)\"><strong>\ud83d\udca1<\/strong> <strong>Note:<\/strong> Webhooks might not validate and work on some staging site domains!<\/p>\n\n\n\n<p>Setting up webhooks should be fairly simple. In the Stripe settings area, you\u2019ll find a webhook endpoint URL ready for you to copy and paste into your Stripe dashboard:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Head to <strong>Tickets &gt; Settings &gt; Payments &gt; Stripe &gt; Webhooks<\/strong> and copy the value of the &#8220;<strong>Webhooks URL<\/strong>&#8221; field.<\/li>\n\n\n\n<li>In your Stripe Dashboard go to <strong><a href=\"https:\/\/dashboard.stripe.com\/webhooks\" target=\"_blank\" rel=\"noreferrer noopener\">Developers &gt; Webhooks<\/a><\/strong> and click on &#8220;Add endpoint&#8221;.<\/li>\n\n\n\n<li>Paste the &#8220;Webhooks URL&#8221; value you&#8217;ve copied in step one in the &#8220;<strong>Endpoint URL<\/strong>&#8221; field. Add a description if you feel it&#8217;s necessary.<\/li>\n\n\n\n<li>Click the blue <strong>+ Select Events<\/strong> button and select the following events (at minimum)\n<ul class=\"wp-block-list\">\n<li>account.updated<\/li>\n\n\n\n<li>charge.expired<\/li>\n\n\n\n<li>charge.failed<\/li>\n\n\n\n<li>charge.succeeded<\/li>\n\n\n\n<li>charge.refunded<\/li>\n\n\n\n<li>payment_intent.canceled<\/li>\n\n\n\n<li>payment_intent.created<\/li>\n\n\n\n<li>payment_intent.payment_failed<\/li>\n\n\n\n<li>payment_intent.processing<\/li>\n\n\n\n<li>payment_intent.requires_action<\/li>\n\n\n\n<li>payment_intent.succeeded<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Select&nbsp;<strong>Latest API version<\/strong>&nbsp;from the&nbsp;<strong>Version<\/strong>&nbsp;section, if shown, and then \u201cAdd endpoint\u201d.<\/li>\n\n\n\n<li>From within your newly created Webhook endpoint page,&nbsp;copy&nbsp;the Webhook&nbsp;<strong>Signing secret&nbsp;<\/strong>(after clicking&nbsp;<strong>Reveal<\/strong>). Your Webhook Signing secret is prefixed with \u2018<strong>whsec_\u2019.<\/strong><\/li>\n\n\n\n<li>Back in <strong>Tickets &gt; Settings &gt; Payments &gt; Stripe &gt; Webhooks<\/strong> paste the value from the previous step into the &#8220;<strong>Signing secret<\/strong>&#8221; field.<\/li>\n<\/ul>\n\n\n\n<p>One important thing to have in mind is that the webhooks validation will not work while <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/tickets-commerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tickets Commerce<\/a> is in test mode. If you are experiencing issues setting up Stripe, we recommend switching to <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/permalinks-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">Pretty Permalinks<\/a>, which you can find under <strong>WordPress Settings &gt; Permalinks<\/strong>.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:var(--global-palette8)\"><strong>Note:<\/strong> Due to Stripe&#8217;s Single Platform Policy, you won&#8217;t be able to connect to multiple platforms using the same account at the same time. As a workaround, we recommend you create individual accounts under the same Stripe user login to connect to different platforms.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1016\" height=\"658\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/10\/stripe-newaccount.gif\" alt=\"\" class=\"wp-image-1954406\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-customizing-stripe-compact-checkout\">Customizing Stripe Compact Checkout<\/h2>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-8cf370e7 wp-block-group-is-layout-flex\">\n<p>If you have <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/tickets-commerce\/#h-connecting-to-stripe\" target=\"_blank\" rel=\"noreferrer noopener\">Event Tickets set up with Tickets Commerce and Stripe<\/a>, you can customize the appearance and elements of the Compact Card Element on the checkout page thanks to the filter <code>tec_tickets_commerce_stripe_checkout_localized_data<\/code>.<\/p>\n\n\n\n<p>This guide will walk you through how to change some of the elements available in <a href=\"https:\/\/docs.stripe.com\/js\/elements_object\/create_element?type=card\" target=\"_blank\" rel=\"noreferrer noopener\">Stripe&#8217;s documentation<\/a>. The examples here are non-exhaustive but can be used as a model to customize other option variables provided by Stripe using our filter.<\/p>\n\n\n\n<p>Check out our article about\u00a0<a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/best-practices-for-implementing-custom-code-snippets\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to best implement custom code snippets<\/a>\u00a0on your site.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\" id=\"h-the-compact-card-element\">The Compact Card Element<\/h4>\n\n\n\n<figure class=\"wp-block-image is-resized is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"279\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-12.58.54@2x-1024x279.png\" alt=\"Stripe's compact card checkout element without any modification.\" class=\"wp-image-1963031\" style=\"width:1096px;height:auto\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-12.58.54@2x-1024x279.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-12.58.54@2x-300x82.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-12.58.54@2x-768x209.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-12.58.54@2x.png 1382w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This is Stripe&#8217;s compact card element without any modifications. This will show when checking out a ticket if the settings at <strong>Tickets &gt; Settings &gt; Payments &gt; Stripe &gt; Checkout Settings <\/strong>are configured to only accept credit cards with the streamlined checkout option:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"373\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.10.08@2x-1024x373.png\" alt=\"\" class=\"wp-image-1963032\" style=\"width:1096px;height:auto\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.10.08@2x-1024x373.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.10.08@2x-300x109.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.10.08@2x-768x280.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.10.08@2x-1536x560.png 1536w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.10.08@2x.png 2036w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\" id=\"h-change-the-font-color\">Change the Font Color<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"270\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.27.57@2x-1024x270.png\" alt=\"\" class=\"wp-image-1963035\" style=\"width:1096px;height:auto\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.27.57@2x-1024x270.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.27.57@2x-300x79.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.27.57@2x-768x203.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.27.57@2x.png 1280w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>If your site uses a dark background, using a lighter font color is helpful for readability. This snippet will change the font color and the placeholder font color to white, but you can adjust the color as needed by changing the <a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\" target=\"_blank\" rel=\"noreferrer noopener\">hex code<\/a>.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nfunction tec_tickets_custom_stripe_checkout_localized_data( $data ) {\n\t$data&#x5B;&#039;cardElementStyle&#039;]&#x5B;&#039;base&#039;]&#x5B;&#039;color&#039;] = &#039;#ffffff&#039;; \/\/ Change text color to white\n\t$data&#x5B;&#039;cardElementStyle&#039;]&#x5B;&#039;base&#039;]&#x5B;&#039;::placeholder&#039;]&#x5B;&#039;color&#039;] = &#039;#ffffff&#039;; \/\/ Change placeholder color to white\n\treturn $data;\n}\n\nadd_filter( &#039;tec_tickets_commerce_stripe_checkout_localized_data&#039;, &#039;tec_tickets_custom_stripe_checkout_localized_data&#039; );\n<\/pre><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\" id=\"h-disable-autofill-link\">Disable &#8216;Autofill link&#8217;<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"266\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.31.30@2x-1024x266.png\" alt=\"\" class=\"wp-image-1963036\" style=\"width:1096px;height:auto\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.31.30@2x-1024x266.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.31.30@2x-300x78.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.31.30@2x-768x200.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.31.30@2x.png 1292w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This snippet will disable and hide the &#8216;Autofill link&#8217; option that by default is set to appear on the right-hand side of the input element:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nfunction tec_tickets_custom_stripe_checkout_localized_data( $data ) {\n\t$data&#x5B;&#039;cardElementOptions&#039;]&#x5B;&#039;disableLink&#039;] = true; \/\/ Disable Autofill Link\n\treturn $data;\n}\n\nadd_filter( &#039;tec_tickets_commerce_stripe_checkout_localized_data&#039;, &#039;tec_tickets_custom_stripe_checkout_localized_data&#039; );\n\n<\/pre><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\" id=\"h-remove-postal-code\">Remove Postal Code<\/h4>\n\n\n\n<p>Before snippet: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"287\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.41.17@2x-1024x287.png\" alt=\"\" class=\"wp-image-1963039\" style=\"width:1096px;height:auto\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.41.17@2x-1024x287.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.41.17@2x-300x84.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.41.17@2x-768x215.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.41.17@2x.png 1298w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After snippet: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"278\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.47.55@2x-1024x278.png\" alt=\"\" class=\"wp-image-1963040\" style=\"width:1096px;height:auto\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.47.55@2x-1024x278.png 1024w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.47.55@2x-300x82.png 300w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.47.55@2x-768x209.png 768w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2024\/10\/CleanShot-2024-10-02-at-13.47.55@2x.png 1332w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Removing the postal code is necessary if you are in a country that does not have numerical postal codes, such as Ireland. This snippet will remove and hide that field:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nfunction tec_tickets_custom_stripe_checkout_localized_data( $data ) {\n\t$data&#x5B;&#039;cardElementOptions&#039;]&#x5B;&#039;hidePostalCode&#039;] = true; \/\/ Hide Postal Code.\n\treturn $data;\n}\n\nadd_filter( &#039;tec_tickets_commerce_stripe_checkout_localized_data&#039;, &#039;tec_tickets_custom_stripe_checkout_localized_data&#039; );\n\n<\/pre><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\" id=\"h-there-is-more\">There is more&#8230;<\/h4>\n\n\n\n<p>These were just some options to get you started on customizing your Stripe compact card checkout! There are lots of other possibilities for using the <code>tec_tickets_commerce_stripe_checkout_localized_data<\/code> filter and the different options in <a href=\"https:\/\/docs.stripe.com\/js\/elements_object\/create_element?type=card\" target=\"_blank\" rel=\"noreferrer noopener\">Stripe&#8217;s documentation<\/a>.<\/p>\n\n\n\n<p>You may notice in the snippets above that the first example changes <code>[cardElementStyle]<\/code> while the other two change <code>[cardElementOptions]<\/code>. For full context, these are the localized assets available for customizing and their default values:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&#x5B; \n\t&#039;elementsAppearance&#039; =&gt; &#x5B;\n\t\t&#039;variables&#039; =&gt; &#x5B;\n\t\t\t&#039;borderRadius&#039; =&gt; &#039;4px&#039;,\n\t\t\t&#039;colorPrimary&#039; =&gt; &#039;#334aff&#039;,\n\t\t\t&#039;fontFamily&#039;   =&gt; &#039;Helvetica Neue, Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif&#039;,\n\t\t],\n\t\t&#039;rules&#039; =&gt; &#x5B;\n\t\t\t&#039;.Tab&#039; =&gt; &#x5B;\n\t\t\t\t&#039;borderColor&#039; =&gt; &#039;#d5d5d5&#039;,\n\t\t\t\t&#039;boxShadow&#039;   =&gt; &#039;none&#039;,\n\t\t\t],\n\t\t\t&#039;.Tab--selected&#039; =&gt; &#x5B;\n\t\t\t\t&#039;borderWidth&#039; =&gt; &#039;2px&#039;,\n\t\t\t],\n\t\t\t&#039;.TabLabel&#039; =&gt; &#x5B;\n\t\t\t\t&#039;paddingTop&#039; =&gt; &#039;6px&#039;,\n\t\t\t],\n\t\t\t&#039;.Input&#039; =&gt; &#x5B;\n\t\t\t\t&#039;boxShadow&#039; =&gt; &#039;none&#039;,\n\t\t\t\t&#039;fontSize&#039;  =&gt; &#039;14px&#039;,\n\t\t\t],\n\t\t\t&#039;.Label&#039; =&gt; &#x5B;\n\t\t\t\t&#039;fontSize&#039;     =&gt; &#039;14px&#039;,\n\t\t\t\t&#039;marginBottom&#039; =&gt; &#039;4px&#039;,\n\t\t\t],\n\t\t],\n\t],\n\t&#039;cardElementStyle&#039; =&gt; &#x5B;\n\t\t&#039;base&#039; =&gt; &#x5B;\n\t\t\t&#039;color&#039; =&gt; &#039;#23282d&#039;,\n\t\t],\n\t],\n\t&#039;cardElementOptions&#039; =&gt; &#x5B;\n\t\t\/**\n\t\t * Allow for filtering of available options from Stripe.\n\t\t *\n\t\t * @link https:\/\/docs.stripe.com\/js\/elements_object\/create_element?type=card#elements_create-options\n\t\t *\/\n\t\t&#039;disabled&#039; =&gt; false,\n\t],\n]\n<\/pre><\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-add-a-custom-currency-0\">Add a Custom Currency<\/h2>\n\n\n\n<p>Adding a custom currency to <strong>Tickets Commerce<\/strong> allows you to support transactions in currencies that are not included in the default list. By default, Tickets Commerce supports a wide range of global currencies (see below). <\/p>\n\n\n\n<p>If your currency is not included, you can register it with a simple code snippet. Below, we\u2019ll show you how to add the <strong>Kuwaiti Dinar (KWD)<\/strong> as an example.<\/p>\n\n\n\n<p>Place the following code in your child theme\u2019s <strong>functions.php<\/strong> file or via <a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\">Code Snippets<\/a> plugin:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; title: ; notranslate\" title=\"\">\nadd_filter( &#039;tec_tickets_commerce_currency_code_options&#039;, function( $options ) {\n\t$options&#x5B;&#039;KWD&#039;] = &#039;Kuwaiti Dinar (KWD)&#039;;\n\tksort( $options );\n\treturn $options;\n} );\n\nadd_filter( &#039;tribe_tickets_commerce_currency_code_options_map&#039;, function ( $map ) {\n\t$map&#x5B;&#039;KWD&#039;] = array(\n\t\t&#039;name&#039;          =&gt; __( &#039;Kuwaiti Dinar (KWD)&#039;, &#039;event-tickets&#039; ),\n\t\t\/\/ Arabic symbol &quot;\u062f.\u0643&quot;. Use HTML entities to match TEC&#039;s style.\n\t\t&#039;symbol&#039;        =&gt; &#039;&amp;#x62F;.&amp;#x643;&#039;,\n\t\t&#039;decimal_point&#039; =&gt; &#039;.&#039;,   \/\/ KWD typically uses 3 decimals.\n\t\t&#039;thousands_sep&#039; =&gt; &#039;,&#039;,\n\t);\n\n\tksort( $map );\n\n\treturn $map;\n} );\n<\/pre><\/div>\n\n\n<p>The snippet above will add <strong>KWD<\/strong> as a currency option in WP Admin Dashboard \u2192 Tickets \u2192 Settings \u2192 Payments \u2192 Tickets Commerce \u2192 Currency, as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"653\" height=\"335\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/09\/KWD-Currency.png\" alt=\"\" class=\"wp-image-1966649\" style=\"border-width:1px;object-fit:cover\" srcset=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/09\/KWD-Currency.png 653w, https:\/\/images.theeventscalendar.com\/kb\/uploads\/2025\/09\/KWD-Currency-300x154.png 300w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-notes\"><strong>Notes<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code><a href=\"https:\/\/docs.theeventscalendar.com\/reference\/hooks\/tec_tickets_commerce_currency_code_options\/\" target=\"_blank\" rel=\"noreferrer noopener\">tec_tickets_commerce_currency_code_options<\/a><\/code><br>Adds your new currency option to the dropdown list in Tickets Commerce settings.<\/li>\n\n\n\n<li><code><a href=\"https:\/\/docs.theeventscalendar.com\/reference\/hooks\/tribe_tickets_commerce_currency_code_options_map\/\" target=\"_blank\" rel=\"noreferrer noopener\">tribe_tickets_commerce_currency_code_options_map<\/a><\/code><br>Defines how your custom currency is displayed and formatted.<\/li>\n\n\n\n<li><strong>Symbol:<\/strong> The Arabic Dinar symbol <code>\u062f.\u0643<\/code> is added as an HTML entity so it renders correctly in the frontend.<\/li>\n\n\n\n<li><strong>Decimal Precision:<\/strong> The Kuwaiti Dinar often uses <strong>3 decimal places<\/strong>. You can adjust this in the <code>decimal_point<\/code> and formatting logic if needed.<\/li>\n\n\n\n<li><strong>Sorting:<\/strong> <code><a href=\"https:\/\/www.php.net\/manual\/en\/function.ksort.php\" target=\"_blank\" rel=\"noreferrer noopener\">ksort()<\/a><\/code> is used to keep the currency list in alphabetical order after your custom currency is added.<\/li>\n\n\n\n<li>You can replace <code>\"KWD\"<\/code> with any other custom currency code and adjust the name, symbol, and formatting details.<\/li>\n\n\n\n<li>Always back up your site before making changes to your theme or plugin files.<\/li>\n\n\n\n<li>It is recommended to test the code snippet first in a <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/creating-and-using-a-wordpress-staging-site\/\" target=\"_blank\" rel=\"noreferrer noopener\">staging site<\/a> to catch any unforeseen issues before applying to it to your live site.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-supported-currencies\">Supported Currencies<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>United Arab Emirates dirham (AED)<\/li>\n\n\n\n<li>Afghan afghani (AFN)<\/li>\n\n\n\n<li>Albanian lek (ALL)<\/li>\n\n\n\n<li>Armenian dram (AMD)<\/li>\n\n\n\n<li>Netherlands Antillean guilder (ANG)<\/li>\n\n\n\n<li>Angolan kwanza (AOA)<\/li>\n\n\n\n<li>Argentine peso (ARS)<\/li>\n\n\n\n<li>Australian Dollar (AUD)<\/li>\n\n\n\n<li>Aruban florin (AWG)<\/li>\n\n\n\n<li>Azerbaijani manat (AZN)<\/li>\n\n\n\n<li>Bosnia and Herzegovina convertible mark (BAM)<\/li>\n\n\n\n<li>Barbadian dollar (BBD)<\/li>\n\n\n\n<li>Bangladeshi taka (BDT)<\/li>\n\n\n\n<li>Bulgarian lev (BGN)<\/li>\n\n\n\n<li>Burundian franc (BIF)<\/li>\n\n\n\n<li>Bermudian dollar (BMD)<\/li>\n\n\n\n<li>Brunei dollar (BND)<\/li>\n\n\n\n<li>Bolivian boliviano (BOB)<\/li>\n\n\n\n<li>Brazilian Real (BRL)<\/li>\n\n\n\n<li>Bahamian dollar (BSD)<\/li>\n\n\n\n<li>Botswana pula (BWP)<\/li>\n\n\n\n<li>Belarusian ruble (BYN)<\/li>\n\n\n\n<li>Belize dollar (BZD)<\/li>\n\n\n\n<li>Canadian Dollar (CAD)<\/li>\n\n\n\n<li>Congolese franc (CDF)<\/li>\n\n\n\n<li>Swiss Franc (CHF)<\/li>\n\n\n\n<li>Chilean peso (CLP)<\/li>\n\n\n\n<li>Chinese yuan (CNY)<\/li>\n\n\n\n<li>Colombian peso (COP)<\/li>\n\n\n\n<li>Costa Rican col\u00f3n (CRC)<\/li>\n\n\n\n<li>Cape Verdean escudo (CVE)<\/li>\n\n\n\n<li>Czech Koruna (CZK)<\/li>\n\n\n\n<li>Djiboutian franc (DJF)<\/li>\n\n\n\n<li>Danish Krone (DKK)<\/li>\n\n\n\n<li>Dominican peso (DOP)<\/li>\n\n\n\n<li>Algerian dinar (DZD)<\/li>\n\n\n\n<li>Egyptian pound (EGP)<\/li>\n\n\n\n<li>Ethiopian birr (ETB)<\/li>\n\n\n\n<li>Euro (EUR)<\/li>\n\n\n\n<li>Fijian dollar (FJD)<\/li>\n\n\n\n<li>Pound Sterling (GBP)<\/li>\n\n\n\n<li>Georgian lari (GEL)<\/li>\n\n\n\n<li>Gibraltar pound (GIP)<\/li>\n\n\n\n<li>Gambian dalasi (GMD)<\/li>\n\n\n\n<li>Guinean franc (GNF)<\/li>\n\n\n\n<li>Guatemalan quetzal (GTQ)<\/li>\n\n\n\n<li>Guyanese dollar (GYD)<\/li>\n\n\n\n<li>Hong Kong Dollar (HKD)<\/li>\n\n\n\n<li>Honduran lempira (HNL)<\/li>\n\n\n\n<li>Croatian kuna (HRK)<\/li>\n\n\n\n<li>Haitian gourde (HTG)<\/li>\n\n\n\n<li>Hungarian Forint (HUF)<\/li>\n\n\n\n<li>Indonesian rupiah (IDR)<\/li>\n\n\n\n<li>Israeli New Sheqel (ILS)<\/li>\n\n\n\n<li>Indian Rupee (INR)<\/li>\n\n\n\n<li>Icelandic krona (ISK)<\/li>\n\n\n\n<li>Jamaican dollar (JMD)<\/li>\n\n\n\n<li>Japanese Yen (JPY)<\/li>\n\n\n\n<li>Kenyan shilling (KES)<\/li>\n\n\n\n<li>Kyrgyzstani som (KGS)<\/li>\n\n\n\n<li>Cambodian riel (KHR)<\/li>\n\n\n\n<li>Comorian franc (KMF)<\/li>\n\n\n\n<li>South Korean won (KRW)<\/li>\n\n\n\n<li>Cayman Islands dollar (KYD)<\/li>\n\n\n\n<li>Kazakhstani tenge (KZT)<\/li>\n\n\n\n<li>Lao kip (LAK)<\/li>\n\n\n\n<li>Lebanese pound (LBP)<\/li>\n\n\n\n<li>Sri Lankan rupee (LKR)<\/li>\n\n\n\n<li>Liberian dollar (LRD)<\/li>\n\n\n\n<li>Lesotho loti (LSL)<\/li>\n\n\n\n<li>Moroccan dirham (MAD)<\/li>\n\n\n\n<li>Moldovan leu (MDL)<\/li>\n\n\n\n<li>Malagasy ariary (MGA)<\/li>\n\n\n\n<li>Macedonian denar (MKD)<\/li>\n\n\n\n<li>Burmese kyat (MMK)<\/li>\n\n\n\n<li>Mongolian t\u00f6gr\u00f6g (MNT)<\/li>\n\n\n\n<li>Macanese pataca (MOP)<\/li>\n\n\n\n<li>Mauritian rupee (MUR)<\/li>\n\n\n\n<li>Maldivian rufiyaa (MVR)<\/li>\n\n\n\n<li>Malawian kwacha (MWK)<\/li>\n\n\n\n<li>Mexican peso (MXN)<\/li>\n\n\n\n<li>Malaysian ringgit (MYR)<\/li>\n\n\n\n<li>Mozambican metical (MZN)<\/li>\n\n\n\n<li>Namibian dollar (NAD)<\/li>\n\n\n\n<li>Nigerian naira (NGN)<\/li>\n\n\n\n<li>Nicaraguan c\u00f3rdoba (NIO)<\/li>\n\n\n\n<li>Norwegian Krone (NOK)<\/li>\n\n\n\n<li>Nepalese rupee (NPR)<\/li>\n\n\n\n<li>New Zealand Dollar (NZD)<\/li>\n\n\n\n<li>Panamanian balboa (PAB)<\/li>\n\n\n\n<li>Peruvian sol (PEN)<\/li>\n\n\n\n<li>Papua New Guinean kina (PGK)<\/li>\n\n\n\n<li>Philippine peso (PHP)<\/li>\n\n\n\n<li>Pakistani rupee (PKR)<\/li>\n\n\n\n<li>Polish Zloty (PLN)<\/li>\n\n\n\n<li>Paraguayan guaran\u00ed (PYG)<\/li>\n\n\n\n<li>Qatari riyal (QAR)<\/li>\n\n\n\n<li>Romanian leu (RON)<\/li>\n\n\n\n<li>Serbian dinar (RSD)<\/li>\n\n\n\n<li>Russian Ruble (RUB)<\/li>\n\n\n\n<li>Rwandan franc (RWF)<\/li>\n\n\n\n<li>Saudi riyal (SAR)<\/li>\n\n\n\n<li>Solomon Islands dollar (SBD)<\/li>\n\n\n\n<li>Seychellois rupee (SCR)<\/li>\n\n\n\n<li>Swedish Krona (SEK)<\/li>\n\n\n\n<li>Singapore Dollar (SGD)<\/li>\n\n\n\n<li>Saint Helena pound (SHP)<\/li>\n\n\n\n<li>Sierra Leonean leone (SLL)<\/li>\n\n\n\n<li>Somali shilling (SOS)<\/li>\n\n\n\n<li>Surinamese dollar (SRD)<\/li>\n\n\n\n<li>Swazi lilangeni (SZL)<\/li>\n\n\n\n<li>Thai baht (THB)<\/li>\n\n\n\n<li>Tajikistani somoni (TJS)<\/li>\n\n\n\n<li>Tongan pa\u02bbanga (TOP)<\/li>\n\n\n\n<li>Turkish lira (TRY)<\/li>\n\n\n\n<li>Trinidad and Tobago dollar (TTD)<\/li>\n\n\n\n<li>New Taiwan dollar (TWD)<\/li>\n\n\n\n<li>Tanzanian shilling (TZS)<\/li>\n\n\n\n<li>Ukrainian hryvnia (UAH)<\/li>\n\n\n\n<li>Ugandan shilling (UGX)<\/li>\n\n\n\n<li>U.S. Dollar (USD)<\/li>\n\n\n\n<li>Uruguayan peso (UYU)<\/li>\n\n\n\n<li>Uzbekistani som (UZS)<\/li>\n\n\n\n<li>Vietnamese dong (VND)<\/li>\n\n\n\n<li>Vanuatu vatu (VUV)<\/li>\n\n\n\n<li>Samoan t\u0101l\u0101 (WST)<\/li>\n\n\n\n<li>Central African CFA franc (XAF)<\/li>\n\n\n\n<li>East Caribbean dollar (XCD)<\/li>\n\n\n\n<li>West African CFA franc (XOF)<\/li>\n\n\n\n<li>CFP franc (XPF)<\/li>\n\n\n\n<li>Yemeni rial (YER)<\/li>\n\n\n\n<li>South African Rand (ZAR)<\/li>\n\n\n\n<li>Zambian kwacha (ZMW)<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating Custom Views Tickets Commerce looks good out of the box, but sometimes you may have another look in mind or you need to tweak the plugin to ensure compatibility with your theme. Don&#8217;t worry, you can modify the Tickets Commerce templates to your liking. In order to make that happen, simply make a copy&#8230;<\/p>\n","protected":false},"author":84,"featured_media":1955565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[24,59,308],"tags":[],"stellar-product-taxonomy":[155],"class_list":["post-1966648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizing","category-php-function-snippets","category-tickets-commerce","stellar-product-taxonomy-event-tickets"],"acf":[],"taxonomy_info":{"category":[{"value":24,"label":"Customizations"},{"value":59,"label":"PHP Functions &amp; Snippets"},{"value":308,"label":"Tickets Commerce"}],"stellar-product-taxonomy":[{"value":155,"label":"Event Tickets"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"The Events Calendar Team","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/the_events_calendar_team\/"},"comment_info":0,"category_info":[{"term_id":24,"name":"Customizations","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":157,"filter":"raw","term_order":"0","cat_ID":24,"category_count":157,"category_description":"","cat_name":"Customizations","category_nicename":"customizing","category_parent":0},{"term_id":59,"name":"PHP Functions &amp; Snippets","slug":"php-function-snippets","term_group":0,"term_taxonomy_id":59,"taxonomy":"category","description":"","parent":24,"count":127,"filter":"raw","term_order":"0","cat_ID":59,"category_count":127,"category_description":"","cat_name":"PHP Functions &amp; Snippets","category_nicename":"php-function-snippets","category_parent":24},{"term_id":308,"name":"Tickets Commerce","slug":"tickets-commerce","term_group":0,"term_taxonomy_id":308,"taxonomy":"category","description":"","parent":61,"count":9,"filter":"raw","term_order":"0","cat_ID":308,"category_count":9,"category_description":"","cat_name":"Tickets Commerce","category_nicename":"tickets-commerce","category_parent":61}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1966648"}],"version-history":[{"count":8,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966648\/revisions"}],"predecessor-version":[{"id":1968867,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1966648\/revisions\/1968867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1966648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1966648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1966648"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1966648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}