View Categories

1 min read

We have two options available for you when it comes to adding your tickets to your SureCart Dashboard, Both options use the following shortcode with an additional three parameters allowing you to style the dashboard widget as needed as well as change the date format.

[available_ticket_downloads]

With additional Paramaters of:

[available_ticket_downloads date_format="d/m/Y" wrapper_class="tickets-wrap" event_class="single-event"]

Your two available options are listed below with video tutorials for each showing you how to make your change

Adding to Default Dashboard

Creating a New Tabbed Download

For this to work, you need to enable the tab dashboard option in ticket manager pro and ensure it is not activated elsewhere before doing so, i.e in a code snippet.

Checking the box and saving it is enough to enable this feature, and this will add a new block to Gutenberg that is native to SureCart.

Below is an example of a tabbed customer dashboard created for tickets. to change the icon as highlighted, you need to make some minor changes to the CSS to override the SureCart Defaults

CSS Code and instructions for changing Icons

/* Target the sc-icon inside the tickets tab via its href */
.page-id-163 sc-tab[href*="?tab=tickets"] sc-icon[slot="prefix"] {
  /* Remove the existing icon display */
  color: transparent;
  /* Apply your custom SVG as a background image */
  background-image: url('https://yourwebsite.com/wp-content/uploads/check-ticket-icon.svg');
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 18px;
  height: 18px;
}

/* In case the sc-icon renders an inline SVG, hide it */
.page-id-163 sc-tab[href*="/?tab=tickets"] sc-icon[slot="prefix"] > svg {
  display: none;
}
PHP

In the above snippet it’s important to note the following items

  • .page-id-163 This limits the code to run only on this page You can remove this if you are using a pattern or don’t mind that the CSS will load on every page
  • ?tab=tickets This is telling it what tab to target and swap out the SVG

With the above CSS targeting each individual tab, you could have as many as you need with individual icons for each, and you can add any Gutenberg content you need to the tabs.

The Following Video talks you through a tabbed dashboard with Ticket Manager Pro

You may also find this YouTube Video particularly useful on styling and editing your tabbed dashboard
What are your Feelings